The library

Techniques, not templates

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

01 / 14

Skeleton Shimmer: Paint Wider Than the Box

A shimmer is one gradient painted wider than the element that shows it, then slid sideways: the box never moves, only the paint inside it. The first tab is the everyday skeleton at the reel's 1.2s. The second is the mechanism, slowed to 6s with the clipped overhang drawn faintly beside the box. Three things decide whether it loops cleanly. The travel has to equal the image width, not the element width, or the gradient jumps at the wrap. The stops sit at 25/50/75 rather than 0/50/100, so the image starts and ends on the same colour and repeat-x shows no seam. And the offset is in pixels, because a background-position percentage resolves against (box - image), negative once the image is the wider of the two.

animationcssgradientloadingskeletonbackground-position

02 / 14

Animated Gradient Text Glow

One gradient, clipped to the glyphs and animated by background-position, fills the text; a pseudo-element repeats the same clipped gradient behind it and blurs it into a halo that travels with the colour. Two details make or break it. The glow copy must be set in the same font as the heading — leave the size on the wrapper and an h1 takes its 2em default, so the halo renders at half scale and reads as a smudge beside the word rather than light coming off it. And the wrapper needs isolation: isolate, because z-index: -1 without a stacking context of its own drops the glow behind the page background instead of behind the text. The gradient repeats its first colour last, so the loop has no seam.

animationcssgradientglowtext effectbackground-clip

03 / 14

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

04 / 14

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

05 / 14

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

06 / 14

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

07 / 14

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

08 / 14

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

09 / 14

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

10 / 14

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

11 / 14

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

12 / 14

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