The library

Techniques, not templates

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

01 / 15

Grain on a Gradient: Two Surfaces

Two surfaces: a gradient, and a sheet of noise lying on it. The stack opens so you can see the sheet is nothing clever, only grey static, and compare lays the same gradient down twice with grain on one of them, which settles the argument faster than any amount of describing it. mix-blend-mode: overlay is what turns that static into tooth. It moves the gradient's lightness and leaves the hue alone, so the color survives and the plastic smoothness does not. The noise is an SVG of feTurbulence carried as a background image rather than a CSS filter, since the filter runs inside the SVG and CSS only loads the picture it makes. Each grain button is a different filter, not the same one turned up.

cssgradientblend-modenoisesvgtexture

02 / 15

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 color 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

03 / 15

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 color. 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 color last, so the loop has no seam.

animationcssgradientglowtext effectbackground-clip

04 / 15

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

05 / 15

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

06 / 15

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

07 / 15

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

08 / 15

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

09 / 15

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

10 / 15

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

11 / 15

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

12 / 15

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