The library

Techniques, not templates

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

01 / 12

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

02 / 12

Highlighted Pricing Card

A three-column pricing table where the middle, 'popular' plan stands out with a larger scale, a glowing gradient border, and an accent badge. Numeric figures are aligned using tabular numbers for a clean, consistent look.

csslayouttypographygradientcardpricingtransform

03 / 12

Skeleton Loader with Shimmer

A skeleton loading effect that provides visual feedback to the user while content is loading, making the application feel faster. It features a dark card layout with gray placeholder blocks and a subtle animated gradient 'shimmer' that sweeps across them.

animationcssaccessibilitygradientloaderskeleton

04 / 12

Pure CSS Halftone Texture

Achieve a vintage halftone or risograph print effect by layering a CSS radial gradient for repeating dots over a base color or gradient, blended using `mix-blend-mode`.

animationcssgradientblend-modetexturehalftone

05 / 12

Spotlight Card Glow with Cursor

A sleek card component featuring a dynamic radial glow that follows the user's cursor, illuminating both the card's surface and its border. This effect is achieved using CSS custom properties for cursor position and layered radial gradients with advanced masking.

animationcsshovergradientjavascriptpointer

06 / 12

Silky Edge Fades

Applies a smooth gradient mask to the top and bottom edges of a scrollable container, making content appear to melt into the background instead of ending abruptly. This creates a more polished and continuous user experience.

uxcssscrollgradientmasksmooth-transition

07 / 12

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

08 / 12

Gradient Banding Fix with Noise

This technique prevents undesirable 'banding' in smooth gradients by layering a subtle noise texture over them. The noise, blended with the gradient using `background-blend-mode: overlay`, introduces tiny variations that trick the eye into perceiving a continuous, smoother transition, resulting in a more premium and refined look.

animationcssui/uxgradientnoisedithering

09 / 12

Animated Flowing Gradient Text

A vibrant gradient continuously slides through text, creating an eye-catching, dynamic heading with a subtle glow, making the text feel alive and modern.

animationcsstypographytextgradienteffects

10 / 12

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

11 / 12

Range Slider Gradient Fill

A custom-styled range slider where the track fills with a gradient color from the left as the slider thumb is moved, using a CSS background-size trick and a JavaScript-driven custom property.

cssinputgradientjavascriptsliderrange

12 / 12

Gradient Range Slider with Value Bubble

A custom styled HTML range input with a dynamic gradient fill on the track and a live value bubble that follows the thumb as it's dragged.

gradientjavascriptcss variablessliderrange inputform elements