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

Rotate Floating Label

Label rotates 90 degrees then settles above the input.

#transform #shadow #border

Live preview Forms

Both Icons Input

Input with icons on both left and right sides.

#transform #shadow #border

Live preview Forms

Circle Icon Input

Input with circular icon container on the left.

#transform #shadow #border

Live preview Forms

Flip Icon Input

Input whose icon flips 180 degrees on focus.

#transform #shadow #border

Live preview Forms

Invalid Icon Input

Input with a red X icon that appears when invalid.

#transform #shadow #border

Live preview Forms

Retro Terminal OTP

Old terminal-style OTP with green phosphor text.

#shadow #border

Live preview Forms

Glass Search Bar

Frosted glass search bar with translucent background.

#transform #shadow #border

Live preview Forms

Minimal Slider

Ultra-minimal slider with thin track and small thumb.

#shadow #border

Live preview Forms

Skeuomorphic 3D Input

Realistic 3D input with pressed-in appearance and bevels.

#gradient #shadow #border

Live preview Forms

Success State Input

Input with full success state — green border, check, and label color.

#transform #shadow #border

Live preview Hover

Fireflies Glow

Fireflies blink and float on hover.

#hover #animation #transform

Live preview Hover

Flash Edges

Edges flash bright white on hover.

#hover #animation #shadow

Live preview Hover

Flip 3D Page

Page-turn 3D flip on hover.

#hover #transform #shadow

Live preview Hover

Inset Bevel Frame

Inset beveled frame creates depth on hover.

#hover #transform #shadow

Live preview Hover

Soft Shadow Text

Soft blurred shadow on text on hover.

#hover #shadow

Live preview Hover

Tritone Forest

Earthy forest tritone gradient on hover.

#hover #gradient #shadow

Live preview Hover

3D Zoom Tilt

3D zoom tilt transform on hover.

#hover #transform #shadow

Live preview Loaders

Baseball Pitch

Baseball stitching spinning as it flies past home plate.

#animation #gradient #transform

Live preview Loaders

Card Shuffle

Playing cards fanning out and shuffling back together.

#animation #gradient #transform

Live preview Loaders

Constellation

Stars connecting to form a constellation.

#animation #transform #shadow

Live preview Loaders

Dynamo

Dynamo generating spark.

#animation #gradient #transform

Live preview Loaders

Ember Glow

Hot embers glowing intensely.

#animation #gradient #transform

Live preview Loaders

Flip Card

A gradient card flipping 180 degrees back and forth on its vertical axis.

#gradient #animation #3d

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

Microwave Turntable

Microwave glass plate rotating with a glowing interior.

#animation #gradient #transform

Live preview Loaders

Pilgrim Hat

Pilgrim hat with shiny buckle.

#animation #gradient #transform

Live preview Loaders

Rune Glow

Magical rune glowing with pulse.

#animation #shadow #filter

Live preview Loaders

Spark Fly

Sparks flying upward.

#animation #transform #shadow

Live preview Loaders

Sun Rays

Sun with rotating rays around a glowing yellow center.

#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

Glass Panel Drawer Navbar

Drawer with frosted glass panel styling over a colored background.

#hover #shadow #border

Live preview Navigation

Stack Cards Drawer Navbar

Drawer with stacked card-style links that fan out on hover.

#hover #transform #shadow

Live preview Navigation

Liquid Morph Tab Navbar

Active tab morphs between links like a liquid blob.

#hover #shadow

Live preview Navigation

Magnetic Pull Navbar

Links magnetically grow toward the hovered item while neighbors shrink back.

#hover #transform #shadow

Live preview Navigation

Neon Edge Navbar

Navbar with neon glowing edges.

#hover #transform #shadow

Live preview Navigation

Dark Fade Overlay Navbar

Side panel nav with a fading dark overlay backdrop.

#hover #animation #gradient

Live preview Navigation

Light Fade Overlay Navbar

Side panel nav with a fading light translucent backdrop.

#hover #animation #gradient

Live preview Navigation

Active Flip Pagination

Active page flips on Y axis.

#hover #transform #shadow

Live preview Navigation

Number Glow Pagination

Active number has glowing aura.

#hover #shadow

Live preview Navigation

Pulse Throb Navbar

Active link throbs with a pulsing scale animation.

#hover #animation #transform

Live preview Progress

Coral Comet Progress

The fill ends in a pulsing comet head that keeps glowing at the leading edge of the track.

#animation #transform #shadow

Live preview Tabs

Nickel Notch Tabs

A small pointer notch slides under the active tab and aims at the panel below.

#transform #border #shadow

Live preview Text

Breathing Text

Text slowly scales and glows in a calm breathing rhythm.

#animation #shadow #transform

Live preview Text

Cloud Cover Grey

Overcast grey cloud cover on text.

#animation #gradient #shadow

Live preview Text

Color Negative Space

Negative space color knockout effect.

#shadow

Live preview Text

Count Up Roller

A single digit cycling 0 through 9 on a stepped roller, like an odometer.

#animation #shadow #transform

Live preview Text

Distortion Grit

Gritty distorted guitar text.

#animation #transform #shadow

Live preview Text

Ember Glow Warm

Warm ember pulsing glow.

#animation #shadow

Live preview Text

Manor Estate

Grand manor estate on text.

#animation #gradient #shadow

Live preview Text

Music Note Bounce

Bouncing musical notes over text.

#animation #transform #shadow

Live preview Text

Palace Grand

Grand opulent palace gold on text.

#animation #gradient #shadow

Live preview Text

Bevel Shine

Beveled highlight on glossy dimensional text.

#shadow

Live preview Text

Train Steam

Steam train chugging on text.

#animation #transform #shadow

Live preview Text

Typewriter Old Remington

Old Remington typewriter ink.

#shadow

Live preview Tooltips

Calendar Event

Calendar event tooltip above the trigger.

#hover #transform #shadow

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

Glassmorphism Top

Frosted glass tooltip with backdrop blur above the trigger.

#hover #transform #shadow

Live preview Tooltips

Light Top

Clean light tooltip with subtle shadow above the trigger.

#hover #transform #shadow

Live preview Tooltips

PowerShell

PowerShell blue background tooltip above the trigger.

#hover #transform #shadow

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

Sky Blue Info

Sky blue tooltip with airy lightness above the trigger.

#hover #gradient #transform

Live preview Tooltips

Sticky Note

Yellow sticky note tooltip with curl above the trigger.

#hover #transform #shadow

Live preview Toggles

Charcoal Matte

Matte charcoal black with no-shine knob.

#gradient #transform #shadow

Live preview Toggles

Cinnabar Red

Ancient cinnabar red with carved stone knob.

#gradient #transform #shadow

Live preview Toggles

Coin / Token

Gold coin knob becomes a colored token on the amber track.

#transform #shadow

Live preview Toggles

Coins / Gems

Gold coin stash converts to sparkling gems.

#gradient #transform #shadow

Live preview Toggles

Crossbow / Slingshot

Crossbow knob becomes a slingshot on the brown track.

#transform #shadow

Live preview Toggles

Dense / Sparse

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

#gradient #transform #shadow

Live preview Toggles

Dive / Surface

Diver knob surfaces to an island on the cyan track.

#transform #shadow

Live preview Toggles

Drag / Fling

Knob slides gently on drag and flings with overshoot on toggle.

#transform #shadow

Live preview Toggles

Free / Occupied

Vacant sign flips to occupied restroom style.

#transform #shadow

Live preview Toggles

Hematite Iron

Hematite iron-black with metallic sheen.

#gradient #transform #shadow

Live preview Toggles

Jelly Wobble

Soft jelly knob wobbles with a bouncy spring animation.

#animation #gradient #transform

Live preview Toggles

Liquid Wave Fill

Track fills with an animated wavy liquid that sloshes as the knob slides.

#animation #shadow #border

Live preview Toggles

Marquee Bulb

Theater marquee bulbs chase in sequence when lit.

#animation #gradient #transform

Live preview Toggles

OKLCH Heat Toggle

Off and on colours sit at the same OKLCH lightness, so only the hue appears to move.

#transform #shadow #oklch

Live preview Toggles

Safe / Danger

Green shield flips to a red warning triangle.

#animation #transform #shadow

Live preview Toggles

Staccato / Legato

Dotted track connects into a smooth legato line on toggle.

#gradient #transform #shadow

Live preview Toggles

Teleport / Blink

Knob teleports across with a fading blink step.

#transform #shadow

Live preview Toggles

Tourmaline Stripe

Tourmaline watermelon stripe with pink-green knob.

#gradient #transform #shadow

Live preview Toggles

Trap / Free

Mousetrap knob releases a tiny mouse when toggled on.

#transform #shadow

Live preview Toggles

Treble / Bass Clef

Treble clef knob drops to a bass clef on the violet track.

#transform #shadow

Live preview Toggles

Weekend / Weekday

Party weekend swaps to a focused weekday briefcase.

#transform #shadow

Live preview Toggles

Wool / Cotton

Wool knob becomes a fluffy cotton ball on the cream track.

#transform #shadow

Live preview Toggles

X-Ray Vision

Skeleton pattern reveals through the track when x-rayed.

#animation #gradient #transform

Live preview Accordions

Marble Card Accordion

Card shaped rows that lift on hover and let the description rise into place.

#details #hover #shadow

Live preview Badges

Gold Medal Achievement

Gold medal achievement badge with shine effect.

#gradient #shadow #border

Effects tagged #shadow

Popular tags