#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

Cotton Candy Spin

A swirl of pink cotton candy spins around a paper cone.

#animation #gradient #transform

Live preview Backgrounds

Dandelion Seeds

Floating dandelion seeds drift away on a gentle summer breeze.

#animation #gradient #transform

Live preview Backgrounds

Sahara Desert

Endless Sahara dunes ripple golden under a fierce sun.

#animation #gradient

Live preview Backgrounds

Diagonal Moving Lines

Crisp neon diagonal lines sweep across a dark backdrop like a synth scan.

#gradient #animation #3d

Live preview Backgrounds

Dichroic Glass

Dichroic glass shifts between transmitted and reflected colors.

#animation #gradient

Live preview Backgrounds

Dragon Curve

Heighway dragon curve iterating with fractal jagged edges.

#animation #gradient #transform

Live preview Backgrounds

Crimson Dusk

A dramatic crimson dusk ignites the horizon in red.

#animation #gradient

Live preview Backgrounds

Electric Keyboard

An electric keyboard's keys pulse with neon glow as they play.

#animation #gradient #shadow

Live preview Backgrounds

Foggy Forest

Thick fog rolls between dark silhouetted trees at dawn.

#animation #gradient #transform

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

Kaleidoscope 6

A 6-fold kaleidoscope of bright symmetric patterns.

#animation #gradient #transform

Live preview Backgrounds

MP3 Waveform

An audio waveform scrolls horizontally across a dark panel.

#animation #gradient #shadow

Live preview Backgrounds

Paint Spray

Fine spray paint mist coats a surface in gradient color.

#animation #gradient #filter

Live preview Backgrounds

Swirling Portal

A magical portal swirls with green energy rings.

#gradient #animation #border

Live preview Backgrounds

Spirograph

Spirograph hypotrochoid curve with rotating multi-petal shape.

#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

Vinyl Record Spin

A black vinyl record spins on a turntable under warm light.

#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

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

Blurred Glass Navbar

Navbar with heavy backdrop blur and gradient border.

#hover #gradient #shadow

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

Popular tags