The Complete Guide to CSS Box Shadows
Box shadows are essential CSS properties that add depth, elevation, and visual hierarchy to web design. Our free CSS box shadow generator provides an intuitive visual interface for creating perfect shadows with precise control over horizontal offset, vertical offset, blur radius, spread radius, color, and opacity. Whether you're implementing Material Design elevation, creating card effects, or designing neumorphic UI, this tool generates production-ready CSS code with live preview.
The box-shadow property is one of the most versatile CSS features, supporting multiple shadow layers for complex effects, inset shadows for embossed looks, and colored shadows for creative designs. Unlike traditional drop shadows that require image editing software, CSS box shadows are lightweight, scalable, and easily modified. Our generator includes a library of 12 preset shadows covering common design patterns from subtle card shadows to dramatic glows and neumorphic effects.
✨ Key Features
- Complete Control: Adjust horizontal offset, vertical offset, blur, spread, color, and opacity
- Multiple Layers: Add unlimited shadow layers for complex depth effects
- Inset Shadows: Create inner shadows for pressed or embossed effects
- Live Preview: See your shadow in real-time as you adjust parameters
- Instant CSS Code: Copy-ready CSS for immediate use in your projects
- 12 Presets: Professional shadow styles including Material Design and neumorphic
- Reset Function: Quickly return to default settings
- 100% Free: No premium features, completely free to use
Understanding CSS Box Shadow Properties
Box Shadow Syntax
The CSS box-shadow property follows this syntax: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color; Each value controls a specific aspect of the shadow's appearance. For example, box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15); creates a subtle shadow below an element.
Multiple shadows are separated by commas, allowing you to layer effects: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1); This creates depth by combining a close shadow with a more distant one. Our generator makes it easy to create and manage multiple shadow layers visually. For more CSS utilities, check our CSS Beautifier.
Horizontal Offset (X)
Horizontal offset controls the shadow's position on the X-axis. Positive values move the shadow right, negative values move it left. A value of 0 centers the shadow horizontally. For example, 4px shifts the shadow 4 pixels to the right, suggesting light from the left. Most designs use small offsets (0-10px) for subtle effects or larger values (20-50px) for dramatic, directional shadows. Our tool lets you adjust from -50px to +50px with a slider.
Vertical Offset (Y)
Vertical offset moves the shadow on the Y-axis. Positive values move the shadow down (most common), negative values move it up. Standard elevation effects use positive vertical offsets to simulate light from above, the natural lighting direction. A 4px vertical offset creates a subtle drop shadow, while 20px suggests greater distance from the surface. Material Design uses increasing vertical offsets to indicate elevation levels, with higher elements having larger offsets.
Blur Radius
Blur radius determines how soft or sharp the shadow appears. A value of 0 creates a hard-edged shadow, while larger values create progressively softer, more diffused shadows. Common values range from 4px for subtle shadows to 40px for dramatic glows. Higher blur values mimic shadows cast from greater distances. Soft shadows (high blur) appear more natural and professional, while hard shadows (low blur) create vintage or graphic design effects. Our tool supports blur values from 0 to 100px.
Spread Radius
Spread radius expands or contracts the shadow before applying blur. Positive values make the shadow larger, negative values make it smaller. A 0 spread uses the element's exact size. Spread is optional but powerful: negative spread creates tighter shadows for focused effects, positive spread creates outline-like shadows. For example, 0 0 0 4px #3B82F6 creates a 4-pixel outline effect. Spread with blur creates diffused glow effects perfect for buttons and focus states.
Shadow Color and Opacity
Shadow color traditionally uses black with low opacity for realistic effects: rgba(0, 0, 0, 0.1) creates a subtle gray shadow. However, colored shadows create unique, vibrant designs. Try blue shadows for tech aesthetics, purple for creative brands, or matching your brand colors. Opacity (alpha channel) is crucial: 0.1-0.2 for subtle shadows, 0.3-0.5 for prominent shadows, and 0.6-1.0 for dramatic effects or colored glows. Our tool separates color and opacity for easy control. Use our Color Picker to find perfect shadow colors.
Inset Shadows
The inset keyword changes shadows from outer (default) to inner, creating pressed or embossed effects. Inset shadows appear inside the element's border, suggesting the element is recessed into the surface. They're perfect for input fields (showing depth), pressed button states, and neumorphic design. For example, box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); creates a subtle indentation. Combine inset and regular shadows for complex effects: a button can have an outer shadow for elevation and an inset shadow for texture.
Common Box Shadow Use Cases
Card Elevation
Card shadows are essential in modern web design, separating content containers from backgrounds. Our "Card" preset provides a perfect starting point: two shadow layers create realistic depth. The first layer (close, soft shadow) defines the card's immediate elevation, while the second layer (distant, very soft shadow) adds ambient depth. Cards on white backgrounds use subtle shadows (opacity 0.1-0.15), while cards on colored backgrounds may need stronger shadows for visibility. Hover states often increase shadow size/blur to suggest the card is lifting.
Material Design Elevation
Material Design uses elevation to indicate hierarchy and importance. Our "Material" preset implements Google's elevation system with layered shadows. Higher elevation (app bars, dialogs) uses larger offsets and blur, while lower elevation (cards, buttons) uses smaller values. Material shadows always use black at varying opacities and combine umbra (dark), penumbra (soft), and ambient (very soft) shadows for realism. This creates consistent depth perception across interfaces. Our preset library includes multiple Material-style shadows for different elevation levels.
Button States
Buttons benefit from shadow states that change on interaction. Default state: medium shadow for affordance. Hover state: larger, softer shadow suggesting elevation increase. Active/pressed state: smaller shadow or inset shadow suggesting the button pushes in. Focus state: colored outline shadow for accessibility. For example, a button might use 0 2px 4px rgba(0,0,0,0.2) normally, 0 4px 12px rgba(0,0,0,0.3) on hover, and 0 1px 2px rgba(0,0,0,0.2) when active.
Form Inputs
Input fields use inset shadows to appear recessed, suggesting they're containers for content. A subtle inset shadow like inset 0 1px 3px rgba(0,0,0,0.1) creates depth without overwhelming. Focus states add a colored outline shadow (spread with no blur): 0 0 0 3px rgba(59, 130, 246, 0.3) for a blue focus ring. This maintains the inset effect while clearly indicating focus. Error states can use red shadows, success states green shadows, providing visual feedback beyond border colors.
Neumorphic Design
Neumorphism (soft UI) uses dual shadows to create elements that appear to extrude from the background. Our "Neumorphic" preset demonstrates this: a light shadow on the top-left and a dark shadow on the bottom-right. Both elements and background must be the same color (typically light gray) for the effect to work. Neumorphic design creates subtle, tactile interfaces but requires careful attention to accessibility since contrast is often low. For neumorphic buttons, pressed states reverse the shadows to suggest the button has been pushed in.
Glow Effects
Glowing shadows use colored shadows with high blur and no offset: 0 0 20px rgba(139, 92, 246, 0.6) creates a purple glow. Perfect for hover states, focus indicators, and drawing attention to CTAs. Glow effects work best on dark backgrounds where the colored light is visible. Use brand colors for glows to reinforce identity. Animated glows (pulsing opacity) create compelling loading states and notifications. Our "Glow" preset provides a starting point that you can customize to match your brand colors.
Advanced Shadow Techniques
Layering Multiple Shadows
Multiple shadow layers create depth and realism that single shadows can't achieve. Our "Layered" preset uses three shadows: a tight shadow defining the edge, a medium shadow for primary depth, and a large, soft shadow for ambient depth. This mimics how real-world shadows work, where both direct and ambient light create shadow layers. When layering, order matters: shadows are applied in the order listed, with the first shadow appearing on top. Use 2-4 layers for cards and important elements, but avoid overusing multiple shadows on every element as it can become visually heavy.
Directional Lighting
Consistent light direction creates cohesive interfaces. Decide on a light source position (typically top-left, suggesting natural overhead and window light) and apply consistent shadow angles across your design. Elements with top-left lighting use positive X and Y offsets. This consistency helps users understand spatial relationships: elements with larger shadows appear closer or more important. Avoid mixing light directions unless intentionally creating conflicting focal points. Our preset library uses consistent top-center lighting for compatibility with most designs.
Colored Shadows for Branding
While black shadows are standard, colored shadows create distinctive, branded experiences. Use your brand colors at low opacity for subtle brand reinforcement: blue shadows for tech, green for eco/health, purple for creative brands. Our "Colored" preset demonstrates vibrant colored shadows. Colored shadows work best for accent elements (CTAs, featured cards) rather than every element. On dark backgrounds, colored shadows can suggest colored lighting. Ensure sufficient contrast with backgrounds for accessibility. Pair colored shadows with matching gradients or borders for cohesive designs.
Outline Effects with Spread
Use spread without blur to create outline effects: 0 0 0 2px #3B82F6 creates a 2-pixel blue outline. This technique is perfect for focus states (better than outline property as it respects border-radius) and selection indicators. Unlike borders, shadow outlines don't affect layout or cause shifts. Layer multiple outline shadows for double or triple borders: 0 0 0 2px white, 0 0 0 4px blue creates a white inner outline and blue outer outline. Our "Outline" preset demonstrates this technique.
Animated Shadows
Shadow transitions create smooth, polished interactions. Use CSS transitions to animate shadow changes: transition: box-shadow 0.3s ease; enables smooth shadow transitions on hover or focus. Animate individual shadow properties or the entire box-shadow value. For performance, avoid animating shadows on many elements simultaneously. Loading states can use animated shadows with CSS keyframes to pulse or sweep. Popular patterns include elevating cards on hover (increasing blur and offset) and creating ripple effects on click (briefly expanding spread).
Performance and Best Practices
Shadow Performance Impact
Box shadows have minimal performance impact in modern browsers due to GPU acceleration. However, animating shadows on many elements simultaneously can cause lag on low-end devices. Best practices: use will-change: box-shadow; for elements that will animate, limit the number of animated shadows on screen, and consider using pseudo-elements or transforms for complex animations. Shadows with large blur values (50px+) render slightly slower than smaller blurs, but the difference is negligible for most use cases. Test on target devices to ensure smooth performance.
Browser Compatibility
The box-shadow property has excellent browser support, working in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. Very old browsers (IE8 and below) don't support box-shadow, but these browsers are rarely encountered today. No vendor prefixes are needed with modern CSS. The syntax our tool generates works universally. For the rare case of supporting IE8, provide a fallback with borders or accept that shadows won't appear. Most modern web projects can confidently use box-shadow without compatibility concerns. Check our CSS Minifier to optimize your shadow code.
Accessibility Considerations
While shadows improve visual design, never rely solely on them for accessibility. Users with low vision may not perceive subtle shadows. Ensure sufficient color contrast between elements and backgrounds, independent of shadows. Use shadows to enhance existing differentiation, not create it. For focus indicators, combine colored shadows with high-contrast borders. For disabled states, use color/opacity changes alongside shadow removal. For critical information hierarchy, use size, color, position, and text alongside shadow elevation. Test designs in grayscale to verify they work without shadow perception.
Mobile and Responsive Considerations
Shadows render consistently across devices, but consider these mobile tips: smaller screens benefit from slightly reduced shadow sizes to avoid overwhelming limited space. Test shadows on actual mobile devices – screens with different brightness and color profiles may show shadows differently. Shadows on touch targets should indicate tappability without overwhelming. Reduce shadow complexity on low-end mobile devices for performance. Use media queries to adjust shadow properties for specific breakpoints if needed. Generally, shadows designed for desktop work well on mobile, but testing ensures optimal appearance.
Design Systems and Shadow Scales
Creating Shadow Scales
Professional design systems include shadow scales with 3-5 predefined elevations. For example: Level 1 (0 1px 2px), Level 2 (0 2px 4px), Level 3 (0 4px 8px), Level 4 (0 8px 16px), Level 5 (0 16px 32px). Each level serves specific purposes: Level 1 for subtle cards, Level 2 for standard cards, Level 3 for raised cards/dropdowns, Level 4 for modals, Level 5 for high-priority overlays. Define these in CSS custom properties or Sass variables for consistency. Use our generator to create each level, then codify them in your design system documentation.
Shadow Naming Conventions
Use semantic shadow names for maintainability: --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl or --elevation-1 through --elevation-5. Avoid names like --card-shadow or --button-shadow as the same shadow might be used in multiple contexts. Document which elevation/size to use for each component type. This systematic approach ensures consistency and makes updates easy – change the CSS variable and all instances update.
Integrating with Design Tools
When moving from design tools (Figma, Sketch) to code, shadow translations aren't always direct. Design tools often show shadows differently than browsers render them. Use our generator to match design tool shadows: recreate the design shadow visually, then copy the CSS. This ensures consistency between design and implementation. Document your shadow system in both design tools and CSS. Consider creating a shared library or design tokens that sync between design and code. For team workflows, our tool serves as a bridge between designers and developers, providing a common reference.
Frequently Asked Questions
What's the difference between box-shadow and drop-shadow?
Box-shadow applies to the element's box (rectangular shape), while drop-shadow (an SVG filter) follows the actual shape including transparency. For standard HTML elements, box-shadow is more performant and widely used. Use drop-shadow for SVGs, PNGs with transparency, or images where you want the shadow to follow non-rectangular shapes. Box-shadow is sufficient for 99% of web design needs and is what our generator creates.
How many shadow layers should I use?
Most elements work well with 1-2 shadow layers. Simple cards need just one shadow. Important elements or Material Design elevation uses 2-3 layers for depth and realism. More than 4 layers rarely provides visual benefit and can impact performance. Our presets demonstrate effective layer counts: "Soft" uses 1, "Material" uses 2, "Layered" uses 3. Start with one shadow and add layers only if you need more depth or realism.
Why do my shadows look different on mobile?
Mobile screens have different brightness, contrast, and color profiles than desktop monitors. A shadow that looks subtle on desktop might be nearly invisible on a bright mobile screen outdoors, or too dark on certain displays. Test on actual devices in various lighting conditions. You may need slightly stronger shadows (higher opacity) for mobile if outdoor use is common. Generally, shadows designed for desktop work well on mobile, but testing ensures optimal appearance across devices.
Can I animate box shadows smoothly?
Yes! Add transition: box-shadow 0.3s ease; to smoothly animate shadow changes on hover or focus. This is widely supported and performant in modern browsers. For continuous animations (like pulsing), use CSS keyframes. Avoid animating shadows on many elements simultaneously on low-end devices. Most interactions (hover, focus) work smoothly with shadow transitions. Use shorter durations (0.2-0.3s) for snappy interactions, longer (0.5s+) for dramatic effects.
What's the best shadow color to use?
Black with low opacity (rgba(0, 0, 0, 0.1-0.2)) is standard and works universally. It creates neutral, realistic shadows that don't interfere with content. For specific contexts: use colored shadows matching your brand for CTAs and accent elements, use your background color's darker shade for neumorphic design, use vibrant colors for glow effects on dark backgrounds. Test shadows on your actual background colors – what works on white may not work on colored or dark backgrounds.
Do box shadows affect layout or element size?
No, box shadows don't affect layout or increase element size. They're painted outside the box model without taking up space, so they won't push other elements or cause layout shifts. This is why shadows are perfect for hover effects – they enhance appearance without causing content reflow. However, ensure shadows don't get cut off by parent containers with overflow: hidden. For outline effects using spread, shadows provide the visual border without affecting the element's actual dimensions.
Create Perfect Shadows Now
Our free box shadow generator provides complete control over every shadow property with live preview and instant CSS code. Adjust horizontal and vertical offsets, blur radius, spread radius, color, and opacity. Add multiple shadow layers for depth, use inset shadows for embossed effects, and explore our library of 12 professional presets. Whether you're creating subtle card elevations or dramatic glows, our tool generates production-ready CSS in seconds.
Start by selecting a preset above or adjust the sliders to create custom shadows. Add layers for complex effects, and click "Copy" to get your CSS code. For complete web design workflows, explore our Gradient Generator, Color Picker, and CSS Generator.