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

Torch Pass

A warm torch light passes across the text.

#animation #gradient

Live preview Tooltips

Confetti Pop

Tooltip with confetti pop animation above the trigger.

#hover #gradient #transform

Live preview Tooltips

Emerald Tip

Emerald green tooltip with subtle shimmer above the trigger.

#hover #gradient #transform

Live preview Tooltips

Icon Crown

Tooltip with crown icon above the trigger.

#hover #gradient #transform

Live preview Tooltips

Overline Draw

Tooltip with animated overline drawing above the trigger.

#hover #gradient #transform

Live preview Tooltips

Retro 80s

Retro 80s neon sunset tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Rich Avatar

Tooltip with user avatar above the trigger.

#hover #gradient #transform

Live preview Tooltips

Shimmer Loading

Shimmer loading placeholder tooltip above the trigger.

#hover #animation #gradient

Live preview Tooltips

Sky Blue Info

Sky blue tooltip with airy lightness above the trigger.

#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

Burlap Rough

Rough burlap surface with rustic coarse fibers.

#gradient #transform

Live preview Toggles

Cinnabar Red

Ancient cinnabar red with carved stone knob.

#gradient #transform #shadow

Live preview Toggles

Citrine Glow

Glowing citrine yellow with golden warmth.

#gradient #transform #shadow

Live preview Toggles

Coins / Gems

Gold coin stash converts to sparkling gems.

#gradient #transform #shadow

Live preview Toggles

Crimson Flame

Burning crimson flame with flickering glow.

#gradient #transform #shadow

Live preview Toggles

Dense / Sparse

Dense dot texture spreads out into a sparse pattern on toggle.

#gradient #transform #shadow

Live preview Toggles

Hematite Iron

Hematite iron-black with metallic sheen.

#gradient #transform #shadow

Live preview Toggles

Tornado Form

Tornado funnel cloud forms spinning across the track.

#animation #gradient #transform

Live preview Toggles

Tourmaline Stripe

Tourmaline watermelon stripe with pink-green knob.

#gradient #transform #shadow

Live preview Toggles

Yarn Unwind

Knobby yarn ball rolls across leaving a thread behind.

#gradient #transform

Live preview Badges

Gold Medal Achievement

Gold medal achievement badge with shine effect.

#gradient #shadow #border

Live preview Badges

Trophy Achievement

Trophy-style achievement badge with golden shine.

#gradient #shadow #border

Live preview Badges

Candy Cane Badge

Candy-cane badge with diagonal red-white stripes.

#gradient #shadow #border

Live preview Badges

Cloud Fly Badge

Fly.io cloud badge with red-magenta fly styling.

#gradient #shadow #border

Live preview Badges

Cloud GCP Badge

Google Cloud Platform badge with four-color split styling.

#gradient #shadow #border

Live preview Badges

Cloud Heroku Badge

Heroku cloud badge with purple-paper plane styling.

#gradient #shadow #border

Live preview Badges

Cyber Glitch Grid Badge

Magenta/cyan glitchy badge with a dark grid overlay.

#gradient #shadow #border

Live preview Badges

Debossed Badge

Debossed badge with inset text effect.

#gradient #shadow #border

Live preview Badges

Deco Fringe Badge

Badge with fringe-strip bottom edge.

#gradient #shadow

Live preview Badges

Deco Stitch Cross Badge

Badge with cross-stitch pattern border accent.

#gradient #shadow #border

Live preview Badges

Desert Sand Badge

Sandy beige badge with subtle dune texture.

#gradient #shadow #border

Live preview Badges

Doc Spreadsheet Badge

Spreadsheet badge with grid pattern and green tone.

#gradient #shadow #border

Live preview Badges

Eco Bio Badge

Biodegradable badge with sprout glyph and green tone.

#gradient #shadow #border

Live preview Badges

Eco Recycle Badge

Recycle badge with triangular recycle arrows.

#gradient #shadow #border

Live preview Badges

Eco Wind Badge

Wind-energy badge with cyan turbine styling.

#gradient #shadow #border

Live preview Badges

Embossed Badge

Embossed badge with raised text effect.

#gradient #shadow #border

Live preview Badges

Exclusive Gold Badge

Gold exclusive badge with metallic sheen.

#gradient #transform #shadow

Live preview Badges

Forest Moss Badge

Mossy-textured badge with earthy green gradient.

#gradient #border

Live preview Badges

Framework Angular Badge

Angular framework badge with shield-shape red styling.

#gradient #shadow #border

Live preview Badges

Framework Deno Badge

Deno framework badge with dark-blue dinosaur styling.

#gradient #shadow #border

Live preview Badges

Framework Next Badge

Next.js framework badge with mono black-white styling.

#gradient #shadow #border

Live preview Badges

Framework React Badge

React framework badge with atom-orbit styling.

#gradient #shadow #border

Live preview Badges

BG Slide FX Badge

Animated badge with sliding gradient background.

#animation #gradient #shadow

Live preview Badges

Color Cycle FX Badge

Animated badge that cycles through hue rotations.

#animation #gradient #transform

Live preview Badges

Fill Flood FX Badge

Animated badge with flooding radial fill overlay.

#animation #gradient #transform

Live preview Badges

Hue Shift FX Badge

Animated badge with gentle hue-shift in/out oscillation.

#animation #gradient #transform

Live preview Badges

Letter Pop FX Badge

Animated badge with sequential letter pop animation.

#animation #gradient #shadow

Live preview Badges

Soft Pulse FX Badge

Animated badge with gentle soft-pulse scale animation.

#animation #gradient #transform

Live preview Badges

Rubber FX Badge

Animated badge with elastic rubber-band stretch.

#animation #gradient #transform

Live preview Badges

Shadow Grow FX Badge

Animated badge with growing drop shadow.

#animation #gradient #transform

Live preview Badges

Shadow Shrink FX Badge

Animated badge with shrinking shadow press effect.

#animation #gradient #transform

Live preview Badges

Swing FX Badge

Animated badge that swings like a pendulum from top anchor.

#animation #gradient #transform

Live preview Badges

Typing Loop FX Badge

Animated badge with looping typewriter cursor blink.

#animation #gradient #shadow

Live preview Badges

Garden Bumblebee Badge

Bumblebee-striped badge with yellow-black banding.

#gradient #shadow #border

Live preview Badges

Hue Rotate Pill

Pill that cycles through all hues via hue-rotate filter.

#animation #gradient #transform

Live preview Badges

Language CSS Badge

CSS language badge with blue paint-brush styling.

#gradient #shadow #border

Live preview Badges

Language Java Badge

Java language badge with coffee-cup red styling.

#gradient #shadow #border

Live preview Badges

Platform Web Badge

Web platform badge with browser-globe accent and blue tone.

#gradient #shadow #border

Live preview Badges

Retro 80s Badge

Retro 80s synthwave badge with neon gradient.

#gradient #transform #shadow

Live preview Badges

Striped Ribbon

Banner ribbon with diagonal striped pattern.

#gradient #shadow

Live preview Badges

Sale Flash Badge

Bright sale badge with a flashing shine sweep.

#animation #gradient #transform

Live preview Badges

Gold Wax Seal

Gold wax seal with shimmering surface.

#gradient #transform #shadow

Live preview Badges

Diamond Shape Badge

Diamond/rhombus shaped badge with rotated square styling.

#gradient #shadow

Live preview Badges

Hex Shape Badge

Hexagonal badge with clipped polygon edges.

#gradient #shadow

Live preview Badges

Shield Shape Badge

Shield-shaped badge with classic heraldic silhouette.

#gradient #shadow

Live preview Badges

Triangle Shape Badge

Triangular badge with polygon clipped corners.

#gradient #shadow

Live preview Badges

Space Rocket Badge

Rocket-shaped badge with tapered nose and fins.

#gradient #shadow #border

Live preview Badges

Tier Silver Shield Badge

Silver-tier shield-shaped badge with polished metallic feel.

#gradient #transform #shadow

Live preview Badges

Trust 2FA Badge

Two-factor authentication badge with key-pad glyph.

#gradient #shadow #border

Live preview Badges

Trust Privacy Badge

Privacy shield badge with eye-blocked glyph and purple tone.

#gradient #shadow #border

Live preview Badges

Trust Verified Business Badge

Verified-business badge with checkmark and blue tone.

#gradient #shadow #border

Live preview Badges

Vapor Sunset Badge

Vaporwave sunset gradient badge with retro gradient bars.

#gradient #shadow #border

Live preview Badges

Volcano Lava Badge

Lava-flow badge with animated red-orange ember gradient.

#animation #gradient #shadow

Live preview Badges

Weather Rain Badge

Rainy weather badge with blue raindrop styling.

#gradient #shadow #border

Live preview Badges

Weather Rainbow Badge

Rainbow weather badge with multi-color arc styling.

#gradient #shadow #border

Live preview Badges

Y2K Bubble Badge

Glossy pink bubble badge with translucent highlight.

#gradient #shadow #border

Live preview Backgrounds

Accretion Disk

A superheated accretion disk spirals around a central black mass.

#animation #gradient #transform

Live preview Backgrounds

Arctic Ice

Vast arctic ice floes drift slowly across a freezing polar sea.

#animation #gradient #transform

Live preview Backgrounds

Argyle Diamond

Argyle diamond pattern in layered colors with diagonal overlay lines.

#animation #gradient #filter

Live preview Backgrounds

Autumn Harvest

Golden harvest fields roll under a warm autumn sky.

#animation #gradient #transform

Live preview Backgrounds

Late Autumn

Late autumn leaves drift through bare branches in chill air.

#animation #gradient

Live preview Backgrounds

Peak Autumn

Peak autumn blazes with orange red and yellow leaves.

#animation #gradient

Live preview Backgrounds

Balloon Bouquet

A bouquet of bright balloons drifts gently upward.

#animation #gradient #transform

Live preview Backgrounds

BBQ Grill Flame

A backyard barbecue grill with flames licking the grates.

#animation #gradient #transform

Live preview Backgrounds

Boxing Ring Ropes

Three boxing ring ropes tension across a blue canvas.

#animation #gradient #transform

Live preview Backgrounds

Cake Candle Blow

A birthday cake with candles whose flames lean in the breeze.

#animation #gradient #transform

Live preview Backgrounds

Slot Canyon

Narrow slot canyon with deep shadows and curved walls.

#animation #gradient #transform

Live preview Backgrounds

Cassette Futurism

Retro 70s cassette-futurism with amber CRT scanlines.

#animation #gradient #border

Live preview Backgrounds

Light Caustics

Wavy light caustics dance across a pool floor in rippling patterns.

#animation #gradient #transform

Live preview Backgrounds

Celtic Spiral Knot

Triple Celtic spiral knot weaving in continuous motion.

#animation #gradient #transform

Live preview Backgrounds

Cepheid Variable

A cepheid variable star pulses regularly in brightness.

#animation #gradient #transform

Live preview Backgrounds

Grilled Cheese Melt

A grilled cheese sandwich with cheese oozing out the side.

#animation #gradient #transform

Live preview Backgrounds

Chevron Stripes

Bold chevron stripes pulse and shift in alternating colors.

#animation #gradient

Live preview Backgrounds

Chinoiserie Scenic

Hand-painted chinoiserie wallpaper with pagoda motifs.

#animation #gradient #filter

Live preview Backgrounds

Cinema Projector

A projector beam plays through dust motes in a dark theater.

#animation #gradient #transform

Popular tags