# shadow CSS effects

#animation #shadow #transform

Breathing Text

Text slowly scales and glows in a calm breathing rhythm.

Cloud Cover Grey

Overcast grey cloud cover on text.

Distortion Grit

Gritty distorted guitar text.

Ember Glow Warm

Warm ember pulsing glow.

#animation #shadow

Manor Estate

Grand manor estate on text.

Palace Grand

Grand opulent palace gold on text.

Bevel Shine

Beveled highlight on glossy dimensional text.

Train Steam

Steam train chugging on text.

Typewriter Old Remington

Old Remington typewriter ink.

Live preview Tooltips

Calendar Event

Calendar event tooltip above the trigger.

Live preview Tooltips

Charcoal Noir

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

Live preview Tooltips

Confetti Pop

Tooltip with confetti pop animation above the trigger.

Live preview Tooltips

Emerald Tip

Emerald green tooltip with subtle shimmer above the trigger.

Live preview Tooltips

Glassmorphism Top

Frosted glass tooltip with backdrop blur above the trigger.

Live preview Tooltips

PowerShell

PowerShell blue background tooltip above the trigger.

Live preview Tooltips

Retro 80s

Retro 80s neon sunset tooltip above the trigger.

Live preview Tooltips

Rich Avatar

Tooltip with user avatar above the trigger.

Live preview Tooltips

Sky Blue Info

Sky blue tooltip with airy lightness above the trigger.

Live preview Tooltips

Sticky Note

Yellow sticky note tooltip with curl above the trigger.

#animation #shadow #album

Live preview Timelines

Sway Album Timeline

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

Live preview Toggles

Cinnabar Red

Ancient cinnabar red with carved stone knob.

Live preview Toggles

Citrine Glow

Glowing citrine yellow with golden warmth.

Live preview Toggles

Coins / Gems

Gold coin stash converts to sparkling gems.

Live preview Toggles

Crimson Flame

Burning crimson flame with flickering glow.

Live preview Toggles

Crossbow / Slingshot

Crossbow knob becomes a slingshot on the brown track.

Live preview Toggles

Dense / Sparse

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

Live preview Toggles

Dive / Surface

Diver knob surfaces to an island on the cyan track.

Live preview Toggles

Hematite Iron

Hematite iron-black with metallic sheen.

#animation #shadow #border

Live preview Toggles

Liquid Wave Fill

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

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.

Live preview Toggles

Teleport / Blink

Knob teleports across with a fading blink step.

Live preview Toggles

Tone / Dead

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

Live preview Toggles

Tourmaline Stripe

Tourmaline watermelon stripe with pink-green knob.

Live preview Toggles

Trap / Free

Mousetrap knob releases a tiny mouse when toggled on.

Live preview Toggles

Treble / Bass Clef

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

Live preview Toggles

Weekend / Weekday

Party weekend swaps to a focused weekday briefcase.

Live preview Toggles

Wool / Cotton

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

Live preview Badges

Gold Medal Achievement

Gold medal achievement badge with shine effect.

Live preview Badges

Trophy Achievement

Trophy-style achievement badge with golden shine.

Live preview Badges

Success Alert Badge

Green success alert badge.

#shadow #border

Live preview Badges

Electric Badge

Badge with electric pulse effect.

Live preview Badges

Glow Pulse Badge

Badge with strong glowing pulse aura.

#animation #shadow

Live preview Badges

Candy Cane Badge

Candy-cane badge with diagonal red-white stripes.

Live preview Badges

Certified Ribbon Badge

Certified badge styled like an official ribbon stamp.

Live preview Badges

Cloud Fly Badge

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

Live preview Badges

Cloud GCP Badge

Google Cloud Platform badge with four-color split styling.

Live preview Badges

Cloud Heroku Badge

Heroku cloud badge with purple-paper plane styling.

Live preview Badges

Corner Sale Ribbon

Diagonal corner ribbon with sale text overlay.

Live preview Badges

Cyber Glitch Grid Badge

Magenta/cyan glitchy badge with a dark grid overlay.

Live preview Badges

Debossed Badge

Debossed badge with inset text effect.

Live preview Badges

Deco Fringe Badge

Badge with fringe-strip bottom edge.

Live preview Badges

Deco Stitch Cross Badge

Badge with cross-stitch pattern border accent.

Live preview Badges

Desert Sand Badge

Sandy beige badge with subtle dune texture.

Live preview Badges

Doc Spreadsheet Badge

Spreadsheet badge with grid pattern and green tone.

Live preview Badges

Eco Bio Badge

Biodegradable badge with sprout glyph and green tone.

Live preview Badges

Eco Recycle Badge

Recycle badge with triangular recycle arrows.

Live preview Badges

Eco Wind Badge

Wind-energy badge with cyan turbine styling.

Live preview Badges

Embossed Badge

Embossed badge with raised text effect.

Live preview Badges

Exclusive Gold Badge

Gold exclusive badge with metallic sheen.

Live preview Badges

Framework Angular Badge

Angular framework badge with shield-shape red styling.

Live preview Badges

Framework Deno Badge

Deno framework badge with dark-blue dinosaur styling.

Live preview Badges

Framework Next Badge

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

Live preview Badges

Framework React Badge

React framework badge with atom-orbit styling.

Live preview Badges

BG Slide FX Badge

Animated badge with sliding gradient background.

Live preview Badges

Color Cycle FX Badge

Animated badge that cycles through hue rotations.

Live preview Badges

Fill Flood FX Badge

Animated badge with flooding radial fill overlay.

Live preview Badges

Hue Shift FX Badge

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

Live preview Badges

Letter Pop FX Badge

Animated badge with sequential letter pop animation.

Live preview Badges

Soft Pulse FX Badge

Animated badge with gentle soft-pulse scale animation.

Live preview Badges

Rubber FX Badge

Animated badge with elastic rubber-band stretch.

Live preview Badges

Shadow Grow FX Badge

Animated badge with growing drop shadow.

Live preview Badges

Shadow Shrink FX Badge

Animated badge with shrinking shadow press effect.

Live preview Badges

Swing FX Badge

Animated badge that swings like a pendulum from top anchor.

Live preview Badges

Typing Loop FX Badge

Animated badge with looping typewriter cursor blink.

Live preview Badges

Garden Bumblebee Badge

Bumblebee-striped badge with yellow-black banding.

Live preview Badges

Glow Edge Glass Badge

Glass badge with luminous glowing edge.

#shadow #border #filter

Live preview Badges

Pink Glass Badge

Frosted pink glass badge with soft glow.

#shadow #border #filter

Live preview Badges

Halloween Holiday Badge

Halloween-themed badge with orange and black.

Live preview Badges

Language CSS Badge

CSS language badge with blue paint-brush styling.

Live preview Badges

Language Java Badge

Java language badge with coffee-cup red styling.

Live preview Badges

Neon Cyan Badge

Dark badge with glowing cyan neon outline.

Live preview Badges

Neumorphic Pressed Badge

Inset neumorphic badge with pressed look.

Live preview Badges

Neumorphic Raised Badge

Neumorphic badge with raised appearance.

Live preview Badges

Platform Web Badge

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

Live preview Badges

Retro 80s Badge

Retro 80s synthwave badge with neon gradient.

Live preview Badges

Striped Ribbon

Banner ribbon with diagonal striped pattern.

Live preview Badges

Admin Role Badge

Admin role badge with red shield style.

Live preview Badges

Gold Wax Seal

Gold wax seal with shimmering surface.

Live preview Badges

Diamond Shape Badge

Diamond/rhombus shaped badge with rotated square styling.

Live preview Badges

Hex Shape Badge

Hexagonal badge with clipped polygon edges.

Live preview Badges

Shield Shape Badge

Shield-shaped badge with classic heraldic silhouette.

Live preview Badges

Triangle Shape Badge

Triangular badge with polygon clipped corners.