The library

Techniques, not templates

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

1 / 3

Gradient Border with Two Backgrounds

This UI trick creates a vibrant gradient border around a card by layering two backgrounds: a solid fill clipped to the padding-box and a gradient clipped to the border-box. A transparent CSS border then allows the underlying gradient to show through, resulting in a crisp, scalable gradient outline. The effect can be instantly re-themed by animating a CSS hue variable.

animationcssvariablesgradientbackgroundborderdarkmode

2 / 3

Light-Catching Card Edges

Transform a flat bordered card into a premium, three-dimensional element by faking light interaction, using an inset highlight and layered drop shadows instead of a simple outline.

cssui/uxdesignbox-shadowborder3d effect

3 / 3

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