#gradient CSS effects

5,189 free, pure-CSS effects match the "gradient" tag. Each is copy-ready and needs no library or build step.

Live preview Buttons

Abalone Shell

Iridescent abalone shell with shifting hues.

#animation #gradient #transform

Live preview Cards

Bronze Achievement Card

Bronze-tier achievement with progress and reward.

#gradient #shadow #border

Live preview Backgrounds

Deep Abyss

Lightless ocean abyss glows faintly with bioluminescent specks.

#animation #gradient #transform

Live preview Backgrounds

De Stijl Mondrian

Mondrian-style primary color blocks with bold black lines.

#animation #gradient #filter

Live preview Buttons

Alpine Peak

Snow-capped alpine mountain button.

#hover #gradient #shadow

Live preview Hover

3D Parallax Tilt

Layers shift in 3D based on cursor position for a parallax depth effect.

#gradient #3d #shadow

Live preview Cards

Alarm Card

Alarm card with a clock face, set time, and toggle indicator.

#gradient #transform #shadow

Live preview Buttons

Birch Trunk

White birch trunk with peeling bark.

#hover #gradient #shadow

Live preview Hover

3D Tilt Follow

Element tilts in 3D following cursor on hover.

#gradient #transform

Live preview Navigation

Floating Bottom Nav

Floating bottom navigation with pill design.

#hover #gradient #shadow

Live preview Loaders

Baguette Slice

Baguette being sliced.

#animation #gradient #shadow

Live preview Loaders

Black Hole

A swirling multicolor accretion disk being consumed by a dark core.

#gradient #animation #shadow

Live preview Cards

Character Sheet Card

RPG character sheet card with stats, class, and level.

#gradient #shadow #border

Live preview Backgrounds

Aurora Curtain

Vertical bands of aurora light ripple like a hanging curtain.

#animation #gradient #transform

Live preview Buttons

Aurora Borealis

Northern-lights button with shifting aurora hues.

#hover #animation #gradient

Live preview Buttons

Blade Slash Button

Sleek button with a diagonal blade slash on hover.

#hover #gradient #transform

Live preview Cards

Archer Card

Archer card with bow icon and accuracy stat.

#gradient #shadow #border

Live preview Hover

Property Trace Frame

Hover starts a registered angle animating, so the gradient outline runs the perimeter.

#hover #animation #gradient

Live preview Toggles

Hot / Cold

Flame turns to a snowflake as the temperature flips.

#gradient #transform #shadow

Live preview Backgrounds

Spiral Galaxy

A swirling spiral galaxy of stars rotates in deep space.

#gradient #animation #border

Live preview Loaders

Wormhole Tunnel

Traveling through a wormhole tunnel.

#animation #gradient #transform

Live preview Navigation

3D Chevron Breadcrumbs

Breadcrumbs with 3D chevron separators.

#hover #gradient #transform

Live preview Tabs

Summit Full Width Tabs

Three edge to edge cells split the full width and the chosen one fills to the seams.

#layout #gradient #uppercase

Live preview Badges

Action Copy Badge

Copy action badge with duplicate-page glyph and slate tone.

#gradient #shadow #border

Live preview Backgrounds

Chrome Bubble

Liquid chrome bubble reflecting environment with shifting glare.

#animation #gradient #transform

Live preview Forms

Midnight Background Input

Deep midnight blue gradient background.

#gradient #shadow #border

Live preview Hover

Aperture Iris Close

A dark circular iris contracts over the panel like a camera aperture closing on hover.

#gradient #hover #border

Live preview Navigation

Color Shift Navbar

Navbar with hue-shifting links on hover.

#hover #animation #gradient

Live preview Tabs

Marble Topline Tabs

A veined marble bar with the indicator on its top edge and a popping panel.

#gradient #transform #border

Live preview Backgrounds

Beacon Sweep

A rotating beacon casts a sweeping cone of warning light.

#animation #gradient #transform

Live preview Backgrounds

Brown Noise

Warm brown noise drifting like deep ambient rumble.

#animation #gradient #filter

Live preview Backgrounds

Baroque Damask

Opulent baroque damask with gilded floral flourishes.

#animation #gradient #filter

Live preview Backgrounds

Koch Snowflake

Koch snowflake fractal with infinite crystalline edges.

#animation #gradient #transform

Live preview Backgrounds

Thin Film Interference

Soap-film thin-film interference patterns shifting bands.

#animation #gradient #transform

Live preview Buttons

Barn Owl

Soft tawny owl-feather pattern.

#hover #gradient #shadow

Live preview Forms

Border Draw Radio

Radio card with animated border that draws in when selected.

#gradient #transform #border

Live preview Loaders

Billiards Cue

Pool cue striking ball.

#animation #gradient #transform

Live preview Navigation

Float Rise Navbar

Hovered links gently rise and float with a soft glow underneath.

#hover #gradient #transform

Live preview Sliders

Bloom Vapor Slider

A striped sunset disc rises behind chrome lettering while a neon grid runs to the horizon.

#slider #vaporwave #gradient

Live preview Tooltips

Snow Winter

Winter-themed tooltip with falling snow pattern decoration.

#hover #gradient #transform

Live preview Timelines

Cusp Roadmap Timeline

Quarters read as folded paper bands, each creased down the middle with a lifted corner.

#gradient #hover #origami

Live preview Toggles

Crimson Flame

Burning crimson flame with flickering glow.

#gradient #transform #shadow

Live preview Badges

Common Badge

Common achievement badge with gray gradient.

#gradient #transform #shadow

Live preview Badges

Cloud Netlify Badge

Netlify cloud badge with teal-teal gradient styling.

#gradient #shadow #border

Live preview Badges

Iridescent Glass Badge

Glass badge with iridescent multi-color shimmer.

#gradient #shadow #border

Live preview Badges

Bronze Award Ribbon

Bronze award ribbon with green tails.

#gradient #transform #shadow

Live preview Badges

Space Planet Badge

Planet badge with orbital ring around the text.

#gradient #transform #shadow

Live preview Backgrounds

Abalone Nacre

Abalone shell nacre with shifting iridescent colors.

#animation #gradient #transform

Live preview Backgrounds

Cassette Rewind

Cassette reels spin rapidly in reverse as tape rewinds.

#animation #gradient #transform

Live preview Backgrounds

Wind Chime Spin

Tubular wind chimes sway and ring in a gentle breeze.

#animation #gradient #transform

Live preview Backgrounds

Conic Gradient Spin

A vivid conic gradient rotates behind a soft mask for a hypnotic wheel of color.

#gradient #animation #border

Live preview Backgrounds

Gradient Shift

A wide multi-stop gradient that continuously cycles its position for a calm flow.

#gradient #animation #border

Live preview Backgrounds

Animated Ocean Waves

Layered SVG wave shapes ripple across a calm ocean horizon.

#gradient #animation #border

Live preview Buttons

Antique Brass

Tarnished antique brass with verdigris spots.

#hover #gradient #shadow

Live preview Buttons

Ceramic Glaze

Glossy ceramic with speckled glaze.

#hover #gradient #transform

Live preview Buttons

Emery

Emery-abrasive button with a rough gritty texture.

#hover #gradient #shadow

Live preview Buttons

Spotlight Sweep Button

A warm yellow spotlight glow follows the cursor across the surface.

#gradient #hover #border

Live preview Cards

Locked Achievement Card

Locked achievement card with a padlock, blurred reward, and unlock hint.

#animation #gradient #transform

Live preview Cards

Cotton Candy Card

Cotton candy card with fluffy texture and pastel colors.

#gradient #shadow #border

Live preview Forms

Stars Background Input

Cosmic starfield background with twinkling dots.

#animation #gradient #shadow

Live preview Forms

Flip Radio

Radio card flips in 3D when selected.

#gradient #transform #border

Live preview Hover

Curtain Fall

Curtain falls down to cover content on hover.

#hover #gradient #transform

Live preview Hover

Needle Right Edge

Vertical needle bar slides in from right edge on hover.

#hover #animation #gradient

Live preview Hover

Glitter Sparkle

Glitter sparkles on hover.

#hover #animation #gradient

Live preview Hover

Zoom Blur

Content zooms in with a radial blur, simulating a dolly zoom on hover.

#gradient #hover #shadow

Live preview Loaders

Arcade Cabinet

Retro arcade cabinet screen flickering with neon glow.

#animation #gradient #shadow

Live preview Loaders

Checkers Jump

Checker piece jumping over another.

#animation #gradient

Live preview Loaders

Elevator

Elevator car rising and falling inside its shaft.

#animation #gradient #border

Live preview Navigation

Floating Dock Navbar

macOS-style floating dock navbar with bouncy hover.

#hover #gradient #transform

Live preview Navigation

Glass Light Navbar

Light glass navbar with subtle backdrop tint.

#hover #gradient #shadow

Live preview Navigation

Vertical Tab Gradient Bg Flow

Vertical tabs with an animated gradient background flow on the active.

#hover #animation #gradient

Live preview Progress

Oasis Stairs Progress

A staircase of five blocks where the climbed tiers are lit and a marker sits on the current step.

#staircase #flexbox #gradient

Live preview Sliders

Valve Thermostat Lever

A raked steel cursor rides a recessed slot between an eco stop and a boost stop, under a lit readout.

#slider #thermostat #lever

Live preview Text

Bicolor Gradient

Smooth bicolor diagonal gradient.

#gradient

Live preview Text

Chevron Arrows

Bold chevron arrow stripes in two-tone.

#gradient

Live preview Text

Fade Depth

Text fading from foreground into deep shadow.

#gradient

Live preview Text

Torch Pass

A warm torch light passes across the text.

#animation #gradient

Live preview Toggles

Citrine Glow

Glowing citrine yellow with golden warmth.

#gradient #transform #shadow

Live preview Toggles

Obsidian Volcanic

Volcanic obsidian glass with smoke sheen.

#gradient #transform #shadow

Live preview Toggles

Whirl Pool

Spinning whirlpool swirls water around the knob.

#animation #gradient #transform

Live preview Badges

Action Edit Badge

Edit action badge with pencil glyph and blue accent.

#gradient #shadow #border

Live preview Badges

Glisten Badge

Badge with glistening sparkle dots animation.

#animation #gradient #shadow

Live preview Badges

Arctic Ice Badge

Icy white-blue badge with crystalline chill.

#gradient #shadow #border

Live preview Badges

Award Ribbon

Award ribbon medal with two hanging tails.

#gradient #transform #shadow

Live preview Badges

Cave Stalactite Badge

Sharp stalactite-shaped badge with pointed bottom edge.

#gradient #border

Live preview Badges

Cyber Glitch Grid Badge

Magenta/cyan glitchy badge with a dark grid overlay.

#gradient #shadow #border

Live preview Badges

Deco Corner Fold Badge

Badge with folded-paper corner triangle accent.

#gradient #shadow #border

Live preview Badges

Deco Curve Corner Badge

Badge with asymmetric curved corner radius.

#gradient #shadow #border

Live preview Badges

Doc Excel Badge

Excel document badge with green XLS tag.

#gradient #shadow #border

Live preview Badges

Eco Vegan Badge

Vegan-certified badge with leaf seedling styling.

#gradient #shadow #border

Live preview Badges

BG Fade FX Badge

Animated badge with cross-fading background colors.

#animation #gradient #shadow

Live preview Badges

Confetti Burst FX Badge

Animated badge with confetti-burst particle dots.

#animation #gradient #transform

Live preview Badges

New Pill Badge

Green pill badge announcing new content with a subtle pop-in.

#animation #gradient #transform

Live preview Badges

Retro 80s Badge

Retro 80s synthwave badge with neon gradient.

#gradient #transform #shadow

Live preview Badges

Arrow Tag Shape Badge

Right-pointing arrow-tag badge with pointed end.

#gradient #shadow

Effects tagged #gradient

Popular tags