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

Abalone Shell

Iridescent abalone shell with shifting hues.

#animation #gradient #transform

Live preview Checkboxes

Church Toggle

A church glows softly white when checked.

#transform #shadow #filter

Live preview Checkboxes

Power On Toggle

A power-symbol checkbox that glows green when powered on, dark when off.

#shadow #border #transform

Live preview Cards

Bronze Achievement Card

Bronze-tier achievement with progress and reward.

#gradient #shadow #border

Live preview Buttons

Alpine Peak

Snow-capped alpine mountain button.

#hover #gradient #shadow

Live preview Hover

3D Parallax Tilt

Layers shift in 3D based on cursor position for a parallax depth effect.

#gradient #3d #shadow

Live preview Cards

Alarm Card

Alarm card with a clock face, set time, and toggle indicator.

#gradient #transform #shadow

Live preview Checkboxes

Laptop Work Toggle

A laptop glows blue when checked.

#transform #shadow #filter

Live preview Buttons

3D Push Button

Skeuomorphic 3D button that physically depresses on click.

#hover #3d #shadow

Live preview Buttons

Birch Trunk

White birch trunk with peeling bark.

#hover #gradient #shadow

Live preview Navigation

Floating Bottom Nav

Floating bottom navigation with pill design.

#hover #gradient #shadow

Live preview Hover

Orbit Spiral

Spiral inward orbit on hover.

#hover #animation #transform

Live preview Loaders

Baguette Slice

Baguette being sliced.

#animation #gradient #shadow

Live preview Loaders

Black Hole

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

#gradient #animation #shadow

Live preview Cards

Character Sheet Card

RPG character sheet card with stats, class, and level.

#gradient #shadow #border

Live preview Navigation

Neon Active Drawer Navbar

Drawer with a pulsing neon active indicator on the active link.

#hover #animation #shadow

Live preview Toggles

Active / Inactive

Pulsing green dot signals active vs a still grey one.

#animation #transform #shadow

Live preview Buttons

Aurora Borealis

Northern-lights button with shifting aurora hues.

#hover #animation #gradient

Live preview Cards

Archer Card

Archer card with bow icon and accuracy stat.

#gradient #shadow #border

Live preview Navigation

Horizontal Bottom Dot Nav

Horizontal dot navigation at bottom.

#hover #transform #shadow

Live preview Toggles

Hot / Cold

Flame turns to a snowflake as the temperature flips.

#gradient #transform #shadow

Live preview Navigation

3D Chevron Breadcrumbs

Breadcrumbs with 3D chevron separators.

#hover #gradient #transform

Live preview Toggles

Arrow / Dots

Solid arrow dissolves into a row of dots.

#transform #shadow

Live preview Toggles

Frozen / Melted

Frozen ice knob melts into a puddle shape on the cyan track.

#transform #shadow

Live preview Badges

Action Copy Badge

Copy action badge with duplicate-page glyph and slate tone.

#gradient #shadow #border

Live preview Backgrounds

Chrome Bubble

Liquid chrome bubble reflecting environment with shifting glare.

#animation #gradient #transform

Live preview Forms

Midnight Background Input

Deep midnight blue gradient background.

#gradient #shadow #border

Live preview Loaders

7 Segment Display

7-segment display counting.

#animation #shadow

Live preview Text

Magenta Pop

Bold magenta text with a vibrant electric pop.

#shadow

Live preview Toggles

Equalizer Wave

Flat bars bounce into an animated equalizer.

#animation #transform #shadow

Live preview Backgrounds

Beacon Sweep

A rotating beacon casts a sweeping cone of warning light.

#animation #gradient #transform

Live preview Backgrounds

Koch Snowflake

Koch snowflake fractal with infinite crystalline edges.

#animation #gradient #transform

Live preview Buttons

Barn Owl

Soft tawny owl-feather pattern.

#hover #gradient #shadow

Live preview Buttons

Binary Stream Button

Matrix-style button with falling binary digits in the background.

#hover #animation #transform

Live preview Buttons

Retro Terminal Button

Monospace terminal-style button with blinking cursor block.

#animation #hover #shadow

Live preview Checkboxes

3D Press Check

A chunky 3D button-style checkbox that presses down and turns green when checked.

#3d #shadow #border

Live preview Hover

Neon Shadow Text

Neon glow shadow on text on hover.

#hover #shadow

Live preview Navigation

Elevated Card Navbar

Navbar styled as an elevated card with deep shadow.

#hover #shadow

Live preview Navigation

Float Rise Navbar

Hovered links gently rise and float with a soft glow underneath.

#hover #gradient #transform

Live preview Tooltips

Snow Winter

Winter-themed tooltip with falling snow pattern decoration.

#hover #gradient #transform

Live preview Toggles

Crimson Flame

Burning crimson flame with flickering glow.

#gradient #transform #shadow

Live preview Toggles

Terminal Prompt

Blinking cursor at a shell prompt toggles to a check output.

#animation #transform #shadow

Live preview Toggles

Tether / Untether Device

Phone knob releases its tether cable on toggle.

#transform #shadow

Live preview Badges

Common Badge

Common achievement badge with gray gradient.

#gradient #transform #shadow

Live preview Badges

Cloud Netlify Badge

Netlify cloud badge with teal-teal gradient styling.

#gradient #shadow #border

Live preview Badges

Iridescent Glass Badge

Glass badge with iridescent multi-color shimmer.

#gradient #shadow #border

Live preview Badges

Bronze Award Ribbon

Bronze award ribbon with green tails.

#gradient #transform #shadow

Live preview Badges

Space Planet Badge

Planet badge with orbital ring around the text.

#gradient #transform #shadow

Live preview Backgrounds

Cassette Rewind

Cassette reels spin rapidly in reverse as tape rewinds.

#animation #gradient #transform

Live preview Backgrounds

Wind Chime Spin

Tubular wind chimes sway and ring in a gentle breeze.

#animation #gradient #transform

Live preview Buttons

Antique Brass

Tarnished antique brass with verdigris spots.

#hover #gradient #shadow

Live preview Buttons

Ceramic Glaze

Glossy ceramic with speckled glaze.

#hover #gradient #transform

Live preview Buttons

Emery

Emery-abrasive button with a rough gritty texture.

#hover #gradient #shadow

Live preview Cards

Locked Achievement Card

Locked achievement card with a padlock, blurred reward, and unlock hint.

#animation #gradient #transform

Live preview Cards

Article Card

Blog article card with category tag, title, and read time.

#shadow #border

Live preview Cards

Cotton Candy Card

Cotton candy card with fluffy texture and pastel colors.

#gradient #shadow #border

Live preview Checkboxes

Plum Color Toggle

A color swatch that fills with plum when checked.

#transform #shadow #border

Live preview Checkboxes

Yellowjacket Toggle

A yellowjacket spins yellow when checked.

#animation #transform #shadow

Live preview Forms

Stars Background Input

Cosmic starfield background with twinkling dots.

#animation #gradient #shadow

Live preview Forms

Bottom Only Border Input

Minimalist input with only a bottom border that thickens on focus.

#shadow #border

Live preview Hover

Edge Light Up

All four edges light up on hover.

#hover #shadow

Live preview Hover

Glitter Sparkle

Glitter sparkles on hover.

#hover #animation #gradient

Live preview Hover

Zoom Blur

Content zooms in with a radial blur, simulating a dolly zoom on hover.

#gradient #hover #shadow

Live preview Loaders

Arcade Cabinet

Retro arcade cabinet screen flickering with neon glow.

#animation #gradient #shadow

Live preview Navigation

Floating Dock Navbar

macOS-style floating dock navbar with bouncy hover.

#hover #gradient #transform

Live preview Navigation

Glass Light Navbar

Light glass navbar with subtle backdrop tint.

#hover #gradient #shadow

Live preview Navigation

Vertical Tab Glow Active

Vertical tabs with a glowing active item casting ambient light.

#hover #shadow

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 Tabs

Chalk Rounded Tabs

One soft rounded shell with the content above and a chalk thumb sliding below.

#transform #rounded #shadow

Live preview Text

Chess Knight

Chess knight piece on text.

#animation #transform #shadow

Live preview Text

Cyberpunk Glitch

Yellow cyberpunk text with red/cyan offset and periodic skew glitch.

#animation #shadow #transform

Live preview Tooltips

Charcoal Noir

Near-black charcoal tooltip with a film-noir mood.

#hover #transform #shadow

Live preview Timelines

Sway Album Timeline

Three dated prints hang from a twisted cord and swing gently out of step with each other.

#animation #shadow #album

Live preview Toggles

Awake / Tired

Wide-awake eye closes into a sleepy yawn.

#transform #shadow

Live preview Toggles

Bit Flip

Binary bit flips between 0 and 1 in monospace green.

#transform #shadow #border

Live preview Toggles

Citrine Glow

Glowing citrine yellow with golden warmth.

#gradient #transform #shadow

Live preview Toggles

Obsidian Volcanic

Volcanic obsidian glass with smoke sheen.

#gradient #transform #shadow

Live preview Toggles

Tone / Dead

Sound tone knob becomes a skull when the tone goes dead.

#transform #shadow

Live preview Toggles

Whirl Pool

Spinning whirlpool swirls water around the knob.

#animation #gradient #transform

Live preview Badges

Action Edit Badge

Edit action badge with pencil glyph and blue accent.

#gradient #shadow #border

Live preview Badges

Breathe Glow Badge

Badge with breathing glow effect.

#animation #transform #shadow

Live preview Badges

Glisten Badge

Badge with glistening sparkle dots animation.

#animation #gradient #shadow

Live preview Badges

Arctic Ice Badge

Icy white-blue badge with crystalline chill.

#gradient #shadow #border

Live preview Badges

Award Ribbon

Award ribbon medal with two hanging tails.

#gradient #transform #shadow

Live preview Badges

Brutalist Cyan Badge

Brutalist cyan badge with sharp offset shadow.

#transform #shadow #border

Live preview Badges

Cyber Glitch Grid Badge

Magenta/cyan glitchy badge with a dark grid overlay.

#gradient #shadow #border

Live preview Badges

Deco Corner Fold Badge

Badge with folded-paper corner triangle accent.

#gradient #shadow #border

Live preview Badges

Deco Curve Corner Badge

Badge with asymmetric curved corner radius.

#gradient #shadow #border

Live preview Badges

Doc Excel Badge

Excel document badge with green XLS tag.

#gradient #shadow #border

Live preview Badges

Eco Vegan Badge

Vegan-certified badge with leaf seedling styling.

#gradient #shadow #border

Live preview Badges

BG Fade FX Badge

Animated badge with cross-fading background colors.

#animation #gradient #shadow

Live preview Badges

Confetti Burst FX Badge

Animated badge with confetti-burst particle dots.

#animation #gradient #transform

Live preview Badges

Glass Frost Badge

Frosted glass badge with backdrop blur and subtle border.

#shadow #border #filter

Live preview Badges

New Pill Badge

Green pill badge announcing new content with a subtle pop-in.

#animation #gradient #transform

Live preview Badges

Retro 80s Badge

Retro 80s synthwave badge with neon gradient.

#gradient #transform #shadow

Effects tagged #shadow

Popular tags