#shadow CSS effects

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

Live preview Toggles

Sharp / Flat

Sharp symbol morphs into a flat symbol on the rose track.

#transform #shadow

Live preview Toggles

Shield Up

Energy shield activates with a protective glow barrier.

#gradient #transform #shadow

Live preview Toggles

Short / Tall

Short knob stretches tall as it slides across.

#transform #shadow

Live preview Toggles

Shuriken / Boomerang

Spinning shuriken knob becomes a returning boomerang.

#animation #transform #shadow

Live preview Toggles

Silk Ripple

Pure silk fabric ripples softly with the knob movement.

#animation #gradient #transform

Live preview Toggles

Smooth iOS Slide

Classic iOS-style toggle with a smooth knob slide and color fade.

#shadow #border #transform

Live preview Toggles

Spell / Rune

Sparkle spell knob becomes a glowing rune on the indigo track.

#transform #shadow

Live preview Toggles

String / Percussion

Violin knob becomes a drum on the rose track.

#transform #shadow

Live preview Toggles

Sun / Moon Sky Slide

Orb crosses a gradient sky from blue day to indigo night, swapping its glow.

#gradient #shadow #border

Live preview Toggles

Sync / Async

Spinning sync knob pauses into an async state on toggle.

#animation #transform #shadow

Live preview Toggles

Sync Spin

Two arrows form a sync circle that spins while syncing.

#animation #transform #shadow

Live preview Toggles

Tarnished Silver

Tarnished silver with dark oxidation patina around the edges.

#gradient #transform #shadow

Live preview Toggles

Tempo Slow / Fast

Knob spins slow when off and accelerates when toggled on.

#animation #gradient #transform

Live preview Toggles

Tether / Untether

Chain link breaks into scissors on the slate track.

#transform #shadow

Live preview Toggles

Thunder Storm

Lightning bolt crackles to life on a stormy track.

#animation #gradient #transform

Live preview Toggles

Tide Pool

Tranquil tide pool ripples with marine life colors.

#animation #gradient #transform

Live preview Toggles

Titanium / Chrome

Dark titanium knob polishes to a mirror chrome finish.

#gradient #transform #shadow

Live preview Toggles

Titanium Forged

Forged titanium with hardened steel knob.

#gradient #transform #shadow

Live preview Toggles

Tom / Cymbal

Tom drum knob becomes a sparkling cymbal on the teal track.

#transform #shadow

Live preview Toggles

Topaz Sun

Golden topaz with sun-yellow glow.

#gradient #transform #shadow

Live preview Toggles

Tornado Spin

Tornado icon spins up when the storm toggle activates.

#animation #transform #shadow

Live preview Toggles

Traffic Light Toggle

A horizontal traffic light slider where the knob moves from red stop to green go.

#gradient #shadow #border

Live preview Toggles

Train / Bus

Rail train switches to a road bus route.

#transform #shadow

Live preview Toggles

Tree / Bare

Leafy tree sheds its canopy to a bare winter skeleton.

#gradient #transform #shadow

Live preview Toggles

Tremor / Calm

Tremoring knob calms down on the violet track.

#animation #transform #shadow

Live preview Toggles

Tube Amp

Vacuum tube glows warm orange when the amp powers up.

#gradient #transform #shadow

Live preview Toggles

Tune / Mute

Musical note knob becomes a mute speaker on the indigo track.

#transform #shadow

Live preview Toggles

Turbine Spin

Power turbine blades spin to generate energy.

#animation #gradient #transform

Live preview Toggles

Turquoise Tide

Turquoise tide with rippling wave knob.

#gradient #transform #shadow

Live preview Toggles

UFO Abduct

UFO descends with a tractor beam to abduct.

#gradient #transform #shadow

Live preview Toggles

Veil / Reveal

Translucent knob fades into full opacity as the foggy track clears.

#transform #shadow

Live preview Toggles

Velour Soft

Plush velour texture with deep pile soft surface.

#gradient #transform #shadow

Live preview Toggles

Velvet / Linen

Velvet knob transitions to a woven linen texture on toggle.

#gradient #transform #shadow

Live preview Toggles

Verse / Refrain

Book knob becomes a repeat sign on the amber track.

#transform #shadow

Live preview Toggles

Violet Storm

Dark violet storm clouds with electric purple knob.

#gradient #transform #shadow

Live preview Toggles

Visible / Hidden

Eye opens to reveal content or closes to hide it.

#transform #shadow

Live preview Toggles

VPN / LAN

Shield VPN knob becomes a house LAN on the green track.

#transform #shadow

Live preview Toggles

Wand / Staff

Magic wand knob becomes a powerful staff on the violet track.

#transform #shadow

Live preview Toggles

Watch / Interact

Passive eye becomes an active pointer hand.

#transform #shadow

Live preview Toggles

Wave / Tide

Wave knob swells into a high tide on the blue track.

#transform #shadow

Live preview Toggles

Win / Lose

Trophy gleams for a win, broken for a loss.

#gradient #transform #shadow

Live preview Toggles

Win / Lose RNG

Trophy knob becomes a loss X with a roll-the-dice feel.

#animation #transform #shadow

Live preview Toggles

Wrap / Unwrap

Gift box emoji unwraps into an empty box when toggled.

#transform #shadow

Live preview Toggles

Zircon Spark

Zircon crystal with diamond-bright spark.

#animation #gradient #transform

Live preview Toggles

Zoom Lens

Camera lens zooms in with aperture ring adjusting.

#gradient #transform #shadow

Live preview Accordions

Ivory Dot Accordion

A bare list where a small dot swells into an open ring beside the active row.

#checkbox #minimal #shadow

Live preview Alerts

Oasis Inset Alert

A carved out well sits below the surface and its inner shadow deepens on a slow loop.

#inset #shadow #tip

Live preview Avatars

Frost Double Ring Avatar

Two concentric rings hold the initials and the outer halo widens on hover.

#border #shadow #hover

Live preview Avatars

Hush Double Offset Shadow Tile

Two hard offset shadow layers stack behind the tile and collapse under the pointer.

#shadow #offset #hover

Live preview Avatars

Lull Floating Ground Shadow

A thin elliptical ground shadow shrinks in step with the avatar as it lifts.

#float #shadow #animation

Live preview Avatars

Ridge Layered Depth Avatar

Two tilted plates stack behind the avatar and fan wider when it is hovered.

#layers #depth #shadow

Live preview Badges

Epic Badge

Epic achievement badge with purple gradient.

#gradient #transform #shadow

Live preview Badges

Honor Badge

Badge of honor with deep purple and gold trim.

#transform #shadow #border

Live preview Badges

Legendary Badge

Legendary achievement badge with rainbow shimmer.

#animation #gradient #transform

Live preview Badges

Mastery Badge

Mastery achievement badge with elite styling.

#transform #shadow #border

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

Star Achievement

Star achievement badge for completion recognition.

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

Critical Alert Badge

Critical alert badge with pulsing red animation.

#animation #transform #shadow

Live preview Badges

Danger Alert Badge

Critical danger alert badge with strong red.

#transform #shadow #border

Live preview Badges

Error Alert Badge

Red error alert badge with warning style.

#shadow #border

Live preview Badges

Info Alert Badge

Blue info alert badge for general notifications.

#shadow #border

Live preview Badges

Warning Alert Badge

Yellow warning alert badge.

#shadow #border

Live preview Badges

Fire Badge

Badge with hot flickering fire effect.

#animation #gradient #transform

Live preview Badges

Flicker Badge

Badge with candle-like flicker effect.

#animation #shadow #filter

Live preview Badges

Glitch Badge

Badge with cyberpunk glitch effect.

#animation #transform #shadow

Live preview Badges

Particle Badge

Badge with floating particle dots around it.

#animation #transform #shadow

Live preview Badges

Pulse Glow Badge

Badge with pulsing glow halo around it.

#animation #shadow

Live preview Badges

Pulse Shadow Badge

Badge with pulsing colored shadow.

#animation #shadow

Live preview Badges

RGB Cycle Badge

Gamer-style RGB cycling badge.

#animation #transform #shadow

Live preview Badges

Sparkle Badge

Badge with twinkling sparkle effect.

#animation #gradient #shadow

Live preview Badges

Arctic Aurora Badge

Aurora-borealis gradient badge with shifting green-violet haze.

#animation #gradient #shadow

Live preview Badges

Arctic Snow Badge

Snowy white badge with subtle flake speckles.

#gradient #shadow #border

Live preview Badges

Bronze Metallic Badge

Bronze metallic badge with warm copper gradient.

#gradient #shadow #border

Live preview Badges

Brutalist Black Badge

Brutalist badge with sharp edges and offset shadow.

#transform #shadow #border

Live preview Badges

Double Brutalist Badge

Brutalist badge with double offset shadows.

#transform #shadow #border

Live preview Badges

Brutalist Green Badge

Brutalist green badge with bold offset shadow.

#transform #shadow #border

Live preview Badges

Brutalist Orange Badge

Brutalist orange badge with stark black border.

#transform #shadow #border

Live preview Badges

Brutalist Outline Badge

Brutalist badge with transparent body and thick outline.

#transform #shadow #border

Live preview Badges

Brutalist Pink Badge

Brutalist pink badge with offset shadow.

#transform #shadow #border

Live preview Badges

Brutalist Yellow Badge

Brutalist yellow badge with thick border and offset shadow.

#transform #shadow #border

Live preview Badges

Candy Cupcake Badge

Cupcake badge with frosting-pink swirl and gold sprinkles.

#gradient #shadow #border

Live preview Badges

Candy Gummy Badge

Translucent gummy bear-style badge with jelly glow.

#shadow #border #filter

Live preview Badges

Candy Lollipop Badge

Lollipop badge with spiral swirl pattern.

#gradient #shadow #border

Live preview Badges

Candy Marshmallow Badge

Puffy white marshmallow badge with soft shadow.

#gradient #shadow #border

Live preview Badges

Cave Crystal Badge

Faceted crystal badge with diamond-cut shimmer.

#gradient #shadow #border

Live preview Badges

Cloud AWS Badge

AWS cloud badge with orange-to-dark gradient and Squidward.

#gradient #shadow #border

Live preview Badges

Cloud Azure Badge

Microsoft Azure badge with blue A-triangle styling.

#gradient #shadow #border

Effects tagged #shadow

Popular tags