#gradient CSS effects

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

Live preview Cards

Souvenir Magnet Fridge Card

Fridge souvenir magnet card with destination name and magnetic backing.

#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

Teacher Profile Bio Card

Teacher bio card with avatar, name, subject, and contact info.

#gradient #shadow #border

Live preview Cards

Workout Split Day Card

Weekly workout split showing day focus and exercise list.

#gradient #shadow #border

Live preview Checkboxes

Cosmic Ray Beam

A high-energy cosmic ray beam shoots through the box when checked.

#animation #gradient #transform

Live preview Hover

Color Shift BG

Background hue rotates continuously on hover.

#hover #animation #gradient

Live preview Hover

Explode Out

Colored shards burst outward in all directions with scaling and fading on hover.

#gradient #hover #border

Live preview Hover

Fire Spark

Fire sparks flicker on hover.

#hover #animation #gradient

Live preview Hover

Flip 3D Coin

Coin-toss flip on hover.

#hover #animation #gradient

Live preview Hover

Flip Card

Card flips in 3D to reveal its back face on hover.

#gradient #hover #3d

Live preview Hover

Metallic Sheen Frame

Metallic gradient sheen sweeps the frame on hover.

#hover #animation #gradient

Live preview Hover

Glow Beam Vertical

Vertical light beam sweeps on hover.

#hover #gradient #transform

Live preview Hover

Glow Laser Grid

Laser grid lines light up on hover.

#hover #gradient #shadow

Live preview Hover

Stripes Diagonal Mask

Diagonal stripes sweep across on hover.

#hover #gradient #transform

Live preview Hover

Stripes Vertical Mask

Vertical stripes cascade down on hover.

#hover #gradient #transform

Live preview Hover

Rainbow Arcs

Rainbow arcs shimmer on hover.

#hover #animation #gradient

Live preview Hover

Rain Drops

Rain streaks fall on hover.

#hover #animation #gradient

Live preview Hover

Spotlight Dim Warm

Dim warm spotlight on hover.

#hover #gradient

Live preview Loaders

Asteroid Belt

Asteroids orbiting in a belt formation.

#animation #gradient #transform

Live preview Loaders

Banjo Strum

Banjo strings being strummed.

#animation #gradient #transform

Live preview Loaders

Black Hole

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

#gradient #animation #shadow

Live preview Loaders

Boxing Glove

Boxing glove jabbing back and forth like a punching bag.

#animation #gradient #transform

Live preview Loaders

Brownie Bite

Brownie with bite marks.

#animation #gradient #transform

Live preview Loaders

Cannon Fire

Cannon with periodic fire burst.

#animation #gradient #transform

Live preview Loaders

Chess Knight

Chess knight piece moving.

#animation #gradient #transform

Live preview Loaders

Dart Throw Flight

Dart flying toward board.

#animation #gradient #transform

Live preview Loaders

Elevator

Elevator car rising and falling inside its shaft.

#animation #gradient #border

Live preview Loaders

Flute

Flute with finger keys pressing in a melody pattern.

#animation #gradient #transform

Live preview Loaders

Game Boy

Classic handheld Game Boy with a flickering screen.

#animation #gradient #transform

Live preview Loaders

Ice Cube Melt

Ice cube slowly melting into a puddle of water.

#animation #gradient #transform

Live preview Loaders

Joker Grin

Joker card with shifting grin.

#animation #gradient #transform

Live preview Loaders

Merry-Go-Round

Rotating platform with three colored horses spinning around.

#animation #gradient #transform

Live preview Loaders

Pearl Glow

Pearl with soft iridescent glow.

#animation #gradient #transform

Live preview Loaders

Pole Vault

Pole vaulter going over bar.

#animation #gradient #transform

Live preview Loaders

Rolling Pin

Rolling pin spinning back and forth over dough.

#animation #gradient #transform

Live preview Loaders

Santa Sleigh Fly

Santa's sleigh flying across.

#animation #gradient #transform

Live preview Loaders

Satellite Dish

Satellite dish emitting signal waves.

#animation #gradient #transform

Live preview Loaders

Saxophone

Saxophone with keys pressing along its curved body.

#animation #gradient #transform

Live preview Loaders

Stepper Motor

Stepper motor stepping in increments.

#animation #gradient #transform

Live preview Loaders

Tomato Slice

Tomato slice with seed pattern.

#animation #gradient #transform

Live preview Navigation

Gradient Flow Navbar

Navbar with an animated gradient background flowing across links.

#hover #animation #gradient

Live preview Navigation

3D Icon Nav

3D extruded icon navigation.

#hover #gradient #transform

Live preview Navigation

Step Bar Fill Nav

Horizontal stepper where each segment fills a progress bar on hover.

#hover #gradient #transform

Live preview Navigation

Split Line Gradient Flow Navbar

Nav links separated by animated gradient line dividers.

#hover #animation #gradient

Live preview Navigation

Flip Card Tabs

Tabs that flip like cards revealing back face.

#hover #gradient #transform

Live preview Navigation

Morph Triangle Tabs

Active tab morphs with triangle clip-path.

#hover #gradient

Live preview Text

Ballet Grace

Graceful ballet pink on text.

#animation #gradient #transform

Live preview Text

Daffodil Trumpet

Yellow daffodil trumpet cup on text.

#animation #gradient #transform

Live preview Text

Neptune Blue

Deep blue ice giant Neptune.

#animation #gradient #shadow

Live preview Text

Pearl Shimmer

Iridescent pearl shimmer with soft pastel shifts.

#animation #gradient

Live preview Text

Petals Bloom

Flower petals bloom pattern.

#gradient

Live preview Text

Platinum Shine

Bright platinum-shine metallic gradient with cool highlights.

#gradient

Live preview Text

Strawberry Red

Sweet red strawberry on text.

#animation #gradient #transform

Live preview Tooltips

Confetti Pop

Tooltip with confetti pop animation above the trigger.

#hover #gradient #transform

Live preview Tooltips

Glass Iridescent

Iridescent glass tooltip with a rainbow shimmer overlay.

#hover #gradient #transform

Live preview Tooltips

Mojito Mint

Fresh mojito mint tooltip with lime accent above the trigger.

#hover #gradient #transform

Live preview Tooltips

Shimmer Wave

Tooltip with a shimmering wave gradient sweeping across.

#hover #animation #gradient

Live preview Toggles

Burlap Rough

Rough burlap surface with rustic coarse fibers.

#gradient #transform

Live preview Toggles

Butterfly / Cocoon

Cocoon bursts open into a fluttering butterfly.

#animation #gradient #transform

Live preview Toggles

Copper / Silver

Warm copper knob cools into a bright silver finish.

#gradient #transform #shadow

Live preview Toggles

Cyan Wave

Cyan wave pattern with aqua glow knob.

#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

Solar Eclipse

Moon slides in front of the sun to create an eclipse.

#gradient #transform #shadow

Live preview Toggles

Iris Shutter

Lens-like track opens to reveal the knob inside the iris.

#gradient #transform

Live preview Toggles

Jelly Wobble

Soft jelly knob wobbles with a bouncy spring animation.

#animation #gradient #transform

Live preview Toggles

Plasma Bolt

Electric plasma bolt crackles between two posts when active.

#animation #gradient #transform

Live preview Toggles

Staccato / Legato

Dotted track connects into a smooth legato line on toggle.

#gradient #transform #shadow

Live preview Toggles

Tree / Bare

Leafy tree sheds its canopy to a bare winter skeleton.

#gradient #transform #shadow

Live preview Toggles

Yarn Unwind

Knobby yarn ball rolls across leaving a thread behind.

#gradient #transform

Live preview Badges

Common Badge

Common achievement badge with gray gradient.

#gradient #transform #shadow

Live preview Badges

Epic Badge

Epic achievement badge with purple gradient.

#gradient #transform #shadow

Live preview Badges

Legendary Badge

Legendary achievement badge with rainbow shimmer.

#animation #gradient #transform

Live preview Badges

Milestone Badge

Milestone achievement badge with celebratory styling.

#gradient #shadow #border

Live preview Badges

Rare Badge

Rare achievement badge with blue gradient.

#gradient #transform #shadow

Live preview Badges

Trophy Achievement

Trophy-style achievement badge with golden shine.

#gradient #shadow #border

Live preview Badges

Action Archive Badge

Archive action badge with box glyph and amber tone.

#gradient #shadow #border

Live preview Badges

Action Delete Badge

Delete action badge with red destructive styling.

#gradient #shadow #border

Live preview Badges

Action Download Badge

Download action badge with down-arrow glyph and indigo tone.

#gradient #shadow #border

Live preview Badges

Action Edit Badge

Edit action badge with pencil glyph and blue accent.

#gradient #shadow #border

Live preview Badges

Action Email Badge

Email action badge with envelope glyph and rose tone.

#gradient #shadow #border

Live preview Badges

Action Print Badge

Print action badge with printer glyph and zinc tone.

#gradient #shadow #border

Live preview Badges

Action Save Badge

Save action badge with floppy-disk glyph and green tone.

#gradient #shadow #border

Live preview Badges

Action Upload Badge

Upload action badge with up-arrow glyph and sky-blue tone.

#gradient #shadow #border

Live preview Badges

Fill Bar Badge

Badge with animated bottom fill bar.

#animation #gradient

Live preview Badges

Fire Badge

Badge with hot flickering fire effect.

#animation #gradient #transform

Live preview Badges

Gleam Badge

Badge with subtle gleam reflection.

#animation #gradient #transform

Live preview Badges

Glisten Badge

Badge with glistening sparkle dots animation.

#animation #gradient #shadow

Live preview Badges

Gradient Shift Badge

Badge with continuously shifting gradient.

#animation #gradient

Live preview Badges

Progress Bar Badge

Badge with indeterminate progress indicator.

#animation #gradient

Live preview Badges

Shimmer Badge

Badge with continuous shimmer effect.

#animation #gradient

Live preview Badges

Shine Sweep Badge

Badge with diagonal light sweep across surface.

#animation #gradient #transform

Live preview Badges

Sparkle Badge

Badge with twinkling sparkle effect.

#animation #gradient #shadow

Live preview Badges

Wave Badge

Badge with subtle wave shimmer effect.

#animation #gradient #transform

Popular tags