The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

1 / 3

Rotating Glow Border with @property

A conic gradient can start at any angle, and until that angle is a registered custom property the browser refuses to interpolate it — so the border jumps instead of sweeping. Declare it with @property and one spinning gradient serves a card, an avatar ring and a button, each changing only its palette, speed and direction. The halo is the same gradient again, blurred behind the edge. Worth knowing: inherits is a required descriptor, not an optional one. Leave it out and the whole rule is invalid, --a never registers, and every gradient silently computes to none.

animationcssui/uxgradientconic-gradient@property

2 / 3

Liquid Glass Button

A frosted-glass button with real backdrop-blur, a conic-gradient border that sweeps around on hover, a sheen that glides across the label, and a soft 3D tilt on press — pure CSS, with @property-animated angles.

cssconic-gradientbuttonglassmorphismbackdrop-filter@property

3 / 3

Smooth CSS Variable Animation with @property

This demo showcases how to achieve buttery-smooth, continuous animations of CSS custom properties by registering them with `@property` and specifying their data type. This enables the browser to interpolate values like angles, preventing visual 'snapping' and creating fluid transitions in gradients, glows, and more.

animationcssgradients@propertysmoothcustom properties