The library

Techniques, not templates

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

1 / 4

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 / 4

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 / 4

Spinning Conic Gradient Border

A square card features a mesmerizing, glowing border that slowly rotates through a vibrant rainbow of colors, powered entirely by a single CSS conic-gradient and animation.

animationcssgradientconic-gradientcardborder

4 / 4

Smooth CSS Number Animation with @property

Animate numbers and percentages smoothly in CSS using the @property rule to define custom properties as typed integers, allowing the browser to tween their values during transitions and animations.

animationcssconic-gradientcustom-propertiesat-property