Summarize this article with:
Flat designs feel lifeless. Shadows fix that.
CSS shadow effects examples show you exactly how to add depth, dimension, and polish to any interface without loading heavy graphics or external libraries.
The box-shadow and text-shadow properties can transform boring rectangles into professional UI components that users actually want to click.
This guide walks through practical shadow techniques you can copy and implement today.
You’ll see drop shadow effects for cards, neon glow styles for text, layered shadows that create realistic elevation, and hover transitions that make elements feel interactive.
Each example includes working code ready for your next project.
What is CSS Shadow
CSS shadow is a styling property that adds depth and dimension to elements on a webpage.
Shadows create the illusion that elements float above the background. They’re purely visual, adding no actual space to the document flow.
Three main properties handle shadows in CSS: box-shadow for elements, text-shadow for typography, and the drop-shadow filter function.
Each serves different purposes but shares similar syntax patterns.
Shadows improve visual hierarchy by making certain elements appear closer to the user. Cards, buttons, modals, and navigation bars commonly use shadow effects to stand out.
The CSS3 specification standardized these properties across browsers. Today, box-shadow and text-shadow work in all modern browsers without vendor prefixes.
CSS Shadow Effects Examples To Check Out
3D Cartoon Text w/CSS text-shadow: Unleashing the Fantasy!
See the Pen
3D Cartoon Text w/CSS text-shadow by Fielding Johnston (@fielding)
on CodePen.
Smartly Embossed: Making Text Pop!
See the Pen
Text Shadow Example by Aakhya Singh (@aakhya)
on CodePen.
Beautiful CSS box-shadow: Flexibility at its Finest by Airen
See the Pen
Beautiful CSS box-shadow by 大漠 (@airen)
on CodePen.
CSS3 Text-Shadow Effects: Because, Why Not?
See the Pen
CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo)
on CodePen.
Variable Longshadow with That Gradient Touch
See the Pen
Variable Longshadow with Gradients Mixin by Dario Corsi (@dariocorsi)
on CodePen.
Strokes, Shadows and a Dash of Halftone by Mark Mead
See the Pen
Strokes, Shadows + Halftone Effects by Mark Mead (@markmead)
on CodePen.
Far Flung Shadow: Shadows on the Loose
See the Pen
Text Shadow Example by Aakhya Singh (@aakhya)
on CodePen.
Lighting it up with Fusing Light Bulb Text Effect
See the Pen
Fusing light bulb Text effect by Ankit Navrang (@AnkitNavrang)
on CodePen.
Sass Text Shadow Effect: Sassy and Classy
See the Pen
Sass Text Shadow Effect by alfabill (@alfabill)
on CodePen.
Netflix Vibe with a Shadowy Twist by Nooray Yemon
See the Pen
Netflix style text animation with CSS by Nooray Yemon (@yemon)
on CodePen.
Text Shadow Pattern Animation: Dance of the Shadows
See the Pen
[webkit] Animated “text-shadow” pattern by carpe numidium (@carpenumidium)
on CodePen.
Animating Envelopes with Shadows: Jake Giles-Phillips’ Creation
See the Pen
Animated CSS Mail Button by Jake Giles-Phillips (@jakegilesphillips)
on CodePen.
Shadow that Moves with the Text
See the Pen
Moving Text-shadow by Shadi (@ShadiMuma)
on CodePen.
Stepping into the Limelight: The Fancy Text Shadow
See the Pen
Fancy text shadow by agathaco (@agathaco)
on CodePen.
Material Shadows? Thank Samuel Thornton!
See the Pen
Material Design Box Shadows by Samuel Thornton (@sdthornton)
on CodePen.
Layers and Text, A Match Made in Heaven
See the Pen
Layered text-shadow effect CSS by Shireen Taj (@TajShireen)
on CodePen.
Going Beyond the Rectangle: Chris Coyier’s Vision
See the Pen
Shadow on Shape by Chris Coyier (@chriscoyier)
on CodePen.
Live Stripes: Yoksel’s Shadow Playground
See the Pen
Live stripes by yoksel (@yoksel)
on CodePen.
Feeling Groovy with Daniel Gonzalez
See the Pen
Groovy CSS Effect by Daniel Gonzalez (@dan10gc)
on CodePen.
Blurry, But Make It Fashion
See the Pen
CSS Blurred Text Shadow by Stack Findover (@stack-findover)
on CodePen.
Ribbon-ed & Shadowed, Courtesy of Luiz
See the Pen
Nice CSS Shadow Effect by Luiz Otávio Miranda Figueiredo (@luizomf)
on CodePen.
Solo Shadow Game by TundraTech
See the Pen
Isolating CSS Box Shadows by TundraTech (@TundraTech)
on CodePen.
Beauty in Shadows: Alex Moore’s Pretty Shadow
See the Pen
Pretty shadow by Alex Moore (@MoorLex)
on CodePen.
Turn Up the Glow: Aakhya Singh’s Masterpiece
See the Pen
Text Shadow Example by Aakhya Singh (@aakhya)
on CodePen.
Pinching the Text to Life
See the Pen
Pinchy Type with CSS text-shadow by Bennett Feely (@bennettfeely)
on CodePen.
Where Shadows Dance
See the Pen
Animated Text-Shadow by Erin E. Sullivan (@erinesullivan)
on CodePen.
Let’s Draw the Lines
See the Pen
Text Shadow Example by Aakhya Singh (@aakhya)
on CodePen.
Little Drops of Creativity
See the Pen
dropplets by Oscar Salazar (@raczo)
on CodePen.
Hover and Revel
See the Pen
hover text shadow effect by Pablo Colomban (@pablocolomban)
on CodePen.
Glassy Vibes
See the Pen
Text Shadow Example by Aakhya Singh (@aakhya)
on CodePen.
Shadows that Box the Game
See the Pen
Dynamic Box Shadow by Drew McConville (@drew_mc)
on CodePen.
Tinkling with Shadows
See the Pen
Box shadow piano by yoksel (@yoksel)
on CodePen.
Singing in Pink Stripes
See the Pen
Striped Long Text Shadow Effect by Mandy Michael (@mandymichael)
on CodePen.
Building Blocks of Shadows
See the Pen
CSS Box Shadow Example by Mike Colagrossi (@SantinoMPC)
on CodePen.
Mobile Lights and Parallax Sights
See the Pen
Parallax Shadows (Mobile-Friendly) by Janne Aukia (@jaukia)
on CodePen.
3D? Nah, It’s CSS Magic!
See the Pen
Box-shadow spill by timaronan (@timaronan)
on CodePen.
Neon Nights and Text Delights
See the Pen
Neon text-shadow effect by Fernando Gamers (@fernandogamers)
on CodePen.
Cast It, Box It
See the Pen
Box Shadow Example #1 by Manu Arora (@manuarora700)
on CodePen.
Layered Eclipses
See the Pen
Multiple Shadows by Andrew Spencer (@iam_aspencer)
on CodePen.
Images Step Out
See the Pen
Image Shadows by Oscar Marcelo (@oscarmarcelo)
on CodePen.
How Does the box-shadow Property Work
The box-shadow property applies shadow effects around an element’s frame.
It accepts multiple values in a specific order: horizontal offset, vertical offset, blur radius, spread radius, and color.
Here’s the basic syntax:
“ box-shadow: offset-x offset-y blur-radius spread-radius color; `
Positive offset-x values push the shadow right. Negative values push left.
Positive offset-y values push down. Negative values push up.
The blur-radius softens the shadow edge. Higher values create softer, more diffused shadows. A value of zero creates a sharp edge.
Spread-radius expands or contracts the shadow. Positive values make it larger, negative values make it smaller.
Color accepts any valid CSS color format: hex, rgb, rgba, hsl, or hsla. Using rgba or hsla lets you control shadow opacity.
What Values Does box-shadow Accept
Required values: offset-x and offset-y (both accept pixel, em, or rem units).
Optional values: blur-radius (defaults to 0), spread-radius (defaults to 0), color (defaults to text color), and the inset keyword.
How Do You Set Multiple Shadows
Separate each shadow with a comma. First shadow renders on top.
` box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); `
Layered shadows create more realistic depth. Material Design uses this technique extensively.
How Does the text-shadow Property Work
The text-shadow property adds shadow effects specifically to text content.
Syntax mirrors box-shadow but simpler: offset-x, offset-y, blur-radius, and color. No spread-radius, no inset option.
` text-shadow: offset-x offset-y blur-radius color; `
Text shadows affect every letter in the element. They follow the text’s shape precisely, including curves and serifs.
Multiple shadows work here too. Comma-separate them for layered text effects.
Use our CSS text shadow generator to experiment with values before writing code.
What is the Difference Between box-shadow and text-shadow
Box-shadow wraps around the element’s rectangular frame. Text-shadow follows individual character shapes.
Box-shadow offers spread-radius and inset. Text-shadow doesn’t.
Box-shadow creates shadows for divs, images, buttons. Text-shadow only affects typography.
How Does the drop-shadow Filter Work
The drop-shadow filter function creates shadows that follow an element’s actual shape, including transparency.
Unlike box-shadow (which shadows the rectangular box), drop-shadow respects alpha channels in PNGs and SVG elements.
` filter: drop-shadow(offset-x offset-y blur-radius color); `
No spread-radius option exists here.
The GPU handles filter rendering in most browsers. This can mean better performance for animations, though Safari sometimes struggles with filtered text inputs.
Perfect for shadowing complex shapes, icons, and transparent images where box-shadow would shadow the invisible rectangular boundary.
CSS Box Shadow Examples
These practical examples show box-shadow techniques you can copy directly into your projects.
Each demonstrates different shadow styling approaches for common user interface components.
How to Create a Basic Drop Shadow
The simplest shadow effect. Offset down and right with subtle blur.
` .card { box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15); } `
Works well on CSS cards, image containers, and content blocks.
How to Create an Inset Shadow
The inset keyword flips the shadow inside the element. Creates a pressed or recessed look.
` .input-field { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } `
Common on CSS input text fields and toggle states.
How to Create a Double Border Shadow Effect
Zero blur with zero offset creates a solid outline. Stack multiple for a double-border look.
` .element { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3498db; } `
How to Create a Layered Shadow for Elevation
Multiple shadows at different distances simulate realistic light behavior.
` .elevated-card { box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.08), 0 4px 4px rgba(0,0,0,0.08), 0 8px 8px rgba(0,0,0,0.08); } `
This technique powers Material Design’s elevation system.
How to Create a Colored Shadow
Matching shadow color to element color creates a glowing effect.
` .colored-button { background: #e74c3c; box-shadow: 0 8px 20px rgba(231, 76, 60, 0.4); } `
Avoid pure black shadows on colored elements. They desaturate and look unnatural.
How to Create a Neon Glow Effect
Large blur radius with zero offset and bright color creates neon-style glow.
` .neon-box { box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #00ffff; } `
Layer multiple shadows at increasing blur values for intensity.
How to Create a One-Sided Shadow
Negative spread-radius with positive offset creates single-edge shadows.
` .bottom-shadow { box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.3); } `
Useful for CSS header elements and sticky navigation bars.
How to Create a Shadow on Hover
Combine with CSS hover effects and transitions for interactive feedback.
` .interactive-card { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; }
.interactive-card:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } `
The card appears to lift toward the user. Strong visual cue for interactive elements.
Try our CSS Box Shadow Generator to create custom shadow values visually.
CSS Text Shadow Examples
Text shadow effects add depth, style, and readability improvements to typography.
These techniques work on headings, paragraphs, and any text-based element.
How to Create a Simple Text Shadow
Basic offset with subtle blur. Clean, readable, professional.
` h1 { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } `
How to Create a 3D Text Effect
Stack multiple shadows at increasing offsets for a 3D text effect.
` .text-3d { color: #fff; text-shadow: px 1px 0 #ccc, px 2px 0 #bbb, px 3px 0 #aaa, px 4px 0 #999; } `
Each layer builds depth. Works best with bold, heavy fonts.
How to Create a Letterpress Effect
Light shadow below dark text creates an embossed, pressed-in appearance.
` .letterpress { color: #333; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } `
Subtle but elegant. Popular in minimalist design interfaces.
How to Create a Neon Text Glow
Zero offset with large blur and bright color creates neon glow shadow.
` .neon-text { color: #fff; text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 40px #ff00ff, 0 0 80px #ff00ff; } `
Layer increasing blur values for intensity. Pairs well with dark backgrounds and CSS animated backgrounds.
How to Create a Hard Shadow Effect
Zero blur creates crisp, retro-style shadows.
` .hard-shadow { text-shadow: 3px 3px 0 #000; } `
Bold, graphic, attention-grabbing. Common in CSS text animations and display typography.
How to Create an Outline Text Effect
Four shadows at cardinal directions simulate a text stroke.
` .outline-text { color: #fff; text-shadow: -1px -1px 0 #000, px -1px 0 #000, -1px 1px 0 #000, px 1px 0 #000; } `
Improves readability over busy backgrounds like hero images.
How to Choose Shadow Colors
Shadow color choice affects realism and visual quality more than most developers realize.
Pure black shadows (rgba(0,0,0,x)) desaturate underlying colors. They look flat and artificial.
Better approach: match the shadow’s hue to your background or element color, then darken it.
` / Instead of this / box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
/ Try this on blue elements / box-shadow: 0 4px 8px rgba(30, 60, 90, 0.4); `
HSL color format makes this easier. Keep hue and saturation, lower lightness.
For color contrast and web accessibility, shadows shouldn’t be the only way to distinguish elements.
Shadow opacity typically ranges from 0.1 (subtle) to 0.4 (prominent). Above 0.5 looks heavy.
Common Shadow Mistakes to Avoid
Shadows can hurt performance and design when misused.
Too many shadows: Each shadow requires browser rendering. Dozens of shadowed elements, especially with large blur values, slow page performance.
Shadows everywhere: When everything has a shadow, nothing stands out. Use shadows to create hierarchy, not decoration.
Offset without purpose: Shadow direction implies light source. Random offsets (up here, down there, left somewhere else) look chaotic.
Ignoring dark mode: Shadows barely show on dark backgrounds. Consider inverting to subtle glows or border highlights for responsive design systems.
Animation overkill: Transitioning box-shadow triggers repaints. For smoother CSS animation, animate opacity on a pseudo-element shadow instead.
Forgetting mobile: Large, diffused shadows look impressive on desktop but can feel heavy on smaller viewport sizes. Scale shadow intensity with media queries.
Browser Support for CSS Shadows
Both box-shadow and text-shadow have excellent cross-browser compatibility.
No vendor prefixes needed for modern browsers. Full support in:
- Chrome 10+
- Firefox 4+
- Safari 5.1+
- Edge 12+
- Opera 10.5+
- iOS Safari 5+
- Android Browser 4+
The filter: drop-shadow() function has slightly newer support (Chrome 53+, Firefox 35+) but covers 97%+ of global users.
For legacy browser fallbacks, shadows degrade gracefully. Elements simply appear flat without breaking layout.
Test shadow rendering in Chrome DevTools or Firefox Developer Tools. Computed styles show exactly what values the browser applies.
Use CSS Minifier tools to optimize production stylesheets with multiple shadow declarations.
FAQ on CSS Shadow Effects Examples
What is the difference between box-shadow and drop-shadow?
Box-shadow applies to an element’s rectangular frame regardless of content shape. Drop-shadow (filter function) follows the actual shape including transparent areas in PNGs and SVG graphics. Use drop-shadow for complex shapes, box-shadow for standard elements.
Can I use multiple shadows on one element?
Yes. Separate each shadow declaration with a comma. The first shadow renders on top. Layering multiple shadows at different blur values and offsets creates realistic depth effects used in Material Design elevation systems.
How do I create an inset shadow in CSS?
Add the inset keyword before or after your shadow values. This flips the shadow inside the element, creating a pressed or recessed appearance. Common on input fields, buttons in active states, and neumorphism designs.
Why is my CSS shadow not showing?
Check these common issues: overflow:hidden on parent elements clips shadows, zero blur with zero offset makes shadows invisible, shadow color matches background, or the element has no defined dimensions. Inspect with browser DevTools.
How do I animate box-shadow on hover?
Add transition: box-shadow with your preferred duration and easing. Then define different shadow values in your :hover state. Keep transitions under 300ms for responsive feel. Consider animating opacity on pseudo-elements for better performance.
What color should I use for shadows?
Avoid pure black. Use rgba or hsla with colors that match your design’s hue. Shadow opacity between 0.1 and 0.3 works for most cases. Darker backgrounds need lighter, more subtle shadows or inverted glow effects.
Do CSS shadows affect page performance?
Large blur-radius values and multiple shadows increase rendering cost. Animating box-shadow triggers repaints. For smoother performance, limit shadow complexity, avoid shadows on frequently animated elements, or use transform and opacity animations instead.
How do I create a one-sided shadow?
Use negative spread-radius combined with offset in your desired direction. The spread contracts the shadow while offset positions it. Set blur slightly higher than spread for soft edges on headers and navigation bars.
Can text-shadow improve readability?
Yes. Light shadows on dark text or dark shadows on light text over busy backgrounds increase contrast. The outline technique using four directional shadows creates a stroke effect that separates text from complex hero images.
What is the syntax for CSS box-shadow?
The syntax follows this order: offset-x, offset-y, blur-radius (optional), spread-radius (optional), color (optional), and inset keyword (optional). Only the first two offset values are required. Browsers apply sensible defaults for omitted values.
Conclusion
These CSS shadow effects examples give you the foundation to add visual depth to any web project.
You’ve seen how box-shadow, text-shadow, and the drop-shadow filter each serve different purposes in frontend development.
Start with subtle shadows. A 0.1 to 0.2 opacity creates professional results without overwhelming your design.
Layer multiple shadows for realistic elevation. Use colored shadows on vibrant elements instead of pure black.
Watch performance on pages with many shadowed elements, especially when animating. Test across browsers and viewport sizes.
Shadows aren’t decoration. They’re tools for guiding attention, creating user experience cues, and making cool CSS buttons and CSS modals feel clickable.
Copy the code snippets. Experiment with values. Build something that stands out.
