#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 Backgrounds

Spiral Galaxy

A swirling spiral galaxy of stars rotates in deep space.

#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

Koch Snowflake

Koch snowflake fractal with infinite crystalline edges.

#animation #gradient #transform

Live preview Backgrounds

Tuning Fork Ring

A struck tuning fork vibrates and emits visible resonance waves.

#animation #gradient #transform

Live preview Backgrounds

White Noise Snow

Television white-noise snow with analog flicker.

#animation #gradient

Live preview Backgrounds

Wormhole Spin

Wormhole throat spinning with swirling space-time distortion.

#animation #gradient #transform

Live preview Buttons

Amber Glow Button

Warm amber button with a soft pulsing radial glow.

#hover #animation #gradient

Live preview Buttons

Apricot Glow

Soft apricot orange with gentle glow.

#hover #gradient #transform

Live preview Buttons

Bonsai Tree

Tiny bonsai with green crown on brown pot.

#hover #gradient #shadow

Live preview Buttons

Brass Buckle

Polished brass belt buckle shape.

#hover #gradient #shadow

Live preview Buttons

Ceramic Glaze

Glossy ceramic with speckled glaze.

#hover #gradient #transform

Live preview Buttons

Frosted Ice Button

Translucent frosted ice button with a sweeping crystalline shine.

#gradient #hover #glass

Live preview Buttons

Nebula Cloud

Cosmic purple-pink nebula swirl.

#hover #gradient #transform

Live preview Buttons

Ocean Tide

Waves rolling across a blue button face.

#animation #gradient #transform

Live preview Buttons

Pelagic

Open-ocean pelagic button with deep blue vastness.

#hover #gradient #transform

Live preview Buttons

Rafter

Rafter-button with diagonal roof beams.

#hover #gradient #shadow

Live preview Buttons

Smoke Drift

Translucent gray smoke drifting upward.

#animation #gradient #transform

Live preview Buttons

Tundra Frost

Icy tundra grays with frost crystals.

#hover #gradient #shadow

Live preview Buttons

Vanilla Bean

Creamy vanilla with dark bean specks.

#hover #gradient #transform

Live preview Buttons

Violet Storm

Deep violet button with lightning flicker.

#animation #gradient #shadow

Live preview Buttons

Wave Crest

Wave-crest button with a curling white foam top.

#hover #gradient #transform

Live preview Buttons

Whetstone

Whetstone-button with a smooth sharpening surface.

#hover #gradient #shadow

Live preview Buttons

Yarrow

Pale yarrow-cluster button with tiny white dots.

#hover #gradient #shadow

Live preview Cards

Bakery Fresh Card

Bakery fresh item card with name, baked time, and price.

#gradient #shadow

Live preview Cards

Beach Resort Card

Beach resort card with cabana, umbrellas, and water temp.

#gradient #shadow

Live preview Cards

Beer Flight Card

Beer flight card with sample glasses and ABV range.

#gradient #shadow #border

Live preview Cards

Beer Pair Tips Card

Beer pairing tips card with beer style, dish pairing, and reasoning.

#gradient #shadow #border

Live preview Cards

Circuit Diagram Card

Circuit diagram card with battery, switch, and bulb.

#gradient #shadow #border

Live preview Cards

Climb Pitch Card

Rock climbing pitch card with grade, length, and protection.

#gradient #shadow #border

Live preview Cards

Cocktail Menu Card

Cocktail menu card with a glass illustration, ABV, and tasting notes.

#gradient #shadow #border

Live preview Cards

Codex Lore Card

Codex lore card with an illuminated initial, parchment, and ornate border.

#gradient #shadow #border

Live preview Cards

Coffee Passport

Coffee passport card with stamp grid, roast notes, and a bean icon.

#gradient #transform #shadow

Live preview Cards

Cotton Candy Card

Cotton candy card with fluffy texture and pastel colors.

#gradient #shadow #border

Live preview Cards

Discount Coupon

Coupon card with scissors, a dashed cut line, notch cutouts and a big discount percentage.

#gradient #shadow #border

Live preview Cards

Credit Card

Realistic credit card with a gold chip, embossed number, brand mark and details.

#gradient #hover #3d

Live preview Cards

Earthquake Card

Earthquake alert card with magnitude, depth, and epicenter.

#gradient #shadow #border

Live preview Cards

Energy Type Card

Energy type card showing kinetic vs potential with formula.

#gradient #shadow #border

Live preview Cards

Invite Only Card

Invite-only card with an envelope flap, wax seal, and elegant calligraphy title.

#gradient #transform #shadow

Live preview Cards

Student ID

Student ID card with a portrait, university header, and a barcode strip.

#gradient #shadow #border

Live preview Cards

YouTube Video Card

YouTube-style video card with thumbnail, duration badge, title, and channel.

#gradient #shadow

Live preview Checkboxes

Amber Fossil Stone

A golden amber stone reveals an ancient inclusion when checked.

#gradient #transform #shadow

Live preview Checkboxes

Tarot Card Reveal

A mystical tarot card flips to reveal its face when checked.

#gradient #transform #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 Forms

Skeuomorphic 3D Input

Realistic 3D input with pressed-in appearance and bevels.

#gradient #shadow #border

Live preview Hover

Border Gradient Flow

Animated gradient border flows on hover.

#hover #animation #gradient

Live preview Hover

Contrast Punch

Contrast spikes for a punchy look on hover.

#hover #gradient #filter

Live preview Hover

Needle Right Edge

Vertical needle bar slides in from right edge on hover.

#hover #animation #gradient

Live preview Hover

Glitter Shimmer

Glitter shimmers across surface on hover.

#hover #animation #gradient

Live preview Hover

Glitter Sparkle

Glitter sparkles on hover.

#hover #animation #gradient

Live preview Hover

Tritone Forest

Earthy forest tritone gradient on hover.

#hover #gradient #shadow

Live preview Hover

Warm Overlay

Warm orange overlay washes in on hover.

#hover #gradient

Live preview Loaders

Actuator

Linear actuator extending arm.

#animation #gradient

Live preview Loaders

Arcade Cabinet

Retro arcade cabinet screen flickering with neon glow.

#animation #gradient #shadow

Live preview Loaders

Axe Chop

Axe chopping down into a wooden log repeatedly.

#animation #gradient #transform

Live preview Loaders

Barbell Press

Barbell being pressed up.

#animation #gradient

Live preview Loaders

Baseball Pitch

Baseball stitching spinning as it flies past home plate.

#animation #gradient #transform

Live preview Loaders

Blender Blade

Blender jar with whirring blades at the bottom.

#animation #gradient #transform

Live preview Loaders

Caliper Measure

Digital caliper jaws opening and closing to measure.

#animation #gradient

Live preview Loaders

Camshaft

Camshaft with egg-shaped lobes.

#animation #gradient #transform

Live preview Loaders

Candle Clock

Candle burning down as time passes.

#animation #gradient #transform

Live preview Loaders

Candle Flame

Candle flame flickering.

#animation #gradient #transform

Live preview Loaders

Cannon Fire

Cannon with periodic fire burst.

#animation #gradient #transform

Live preview Loaders

Checkers Jump

Checker piece jumping over another.

#animation #gradient

Live preview Loaders

Dynamo

Dynamo generating spark.

#animation #gradient #transform

Live preview Loaders

Flash Flood

Flash flood water rising rapidly.

#animation #gradient #border

Live preview Loaders

Flip Card

A gradient card flipping 180 degrees back and forth on its vertical axis.

#gradient #animation #3d

Live preview Loaders

Game Boy

Classic handheld Game Boy with a flickering screen.

#animation #gradient #transform

Live preview Loaders

Helicopter Blade

Helicopter rotor blades spinning above the cockpit.

#animation #gradient #transform

Live preview Loaders

Ice Cream Melt

Ice cream melting down cone.

#animation #gradient #transform

Live preview Loaders

Icicle Drip

Icicle dripping water droplets on a winter day.

#animation #gradient #transform

Live preview Loaders

Microwave Turntable

Microwave glass plate rotating with a glowing interior.

#animation #gradient #transform

Live preview Loaders

Morph Blob Loader

A gradient blob melts between organic border-radius shapes while it rotates.

#animation #gradient #transform

Live preview Loaders

Pilgrim Hat

Pilgrim hat with shiny buckle.

#animation #gradient #transform

Live preview Loaders

Sun Rays

Sun with rotating rays around a glowing yellow center.

#animation #gradient #transform

Live preview Loaders

Vinyl Scratch

DJ scratching vinyl record.

#animation #gradient #transform

Live preview Loaders

Welder Spark

Welding torch throwing bright sparks in bursts.

#animation #gradient #transform

Live preview Navigation

3D Arrow Breadcrumbs

Breadcrumbs with 3D arrow separators.

#hover #gradient #transform

Live preview Navigation

Dark Fade Overlay Navbar

Side panel nav with a fading dark overlay backdrop.

#hover #animation #gradient

Live preview Navigation

Aurora Gradient Overlay Navbar

Modal nav over an aurora gradient animated background.

#hover #animation #gradient

Live preview Navigation

Light Fade Overlay Navbar

Side panel nav with a fading light translucent backdrop.

#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 Progress

Origami Cusp Progress

Eight paper facets alternate their crease direction and the five set folds carry the colour.

#origami #clip-path #flexbox

Live preview Sliders

Quartz Gradient Slider

A prismatic quartz rail runs the full spectrum under a bezelled white knob.

#slider #gradient #spectrum

Live preview Tabs

Cobalt Stepper Tabs

Numbered cobalt nodes on a rail, with the connecting line filling as you advance.

#transform #gradient #stepper

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 Text

Burlap Coarse

Coarse burlap fabric weave.

#gradient

Live preview Text

Cloud Cover Grey

Overcast grey cloud cover on text.

#animation #gradient #shadow

Live preview Text

Color Blocks Three

Three vertical color blocks.

#gradient

Live preview Text

Cosmic Nebula

Swirling nebula clouds of purple and pink within text.

#animation #gradient

Live preview Text

Grid Dots

Evenly-spaced dot grid in monochrome.

#gradient

Live preview Text

Manor Estate

Grand manor estate on text.

#animation #gradient #shadow

Live preview Text

Palace Grand

Grand opulent palace gold on text.

#animation #gradient #shadow

Live preview Text

Skyline Silhouette

Dark city skyline silhouette on text.

#animation #gradient #filter

Popular tags