CSS Box Shadow Generator
Layers
Preview Options
Preview
Full Element CSS
Presets
Similar Tools
CSS Glassmorphism Generator
arrow_forwardGenerate liquid-glass style glassmorphism effects
CSS Grid Generator
arrow_forwardGenerate CSS grid layouts in a visual editor
CSS Gradient Generator
arrow_forwardGenerate beautiful CSS gradients
CSS Tools arrow_forward
CSS tools for creating rich and polished user interfaces
CSS Box Shadow Generator & Multi-Layer Shadow Designer
The CSS Box Shadow Generator is a powerful, visual web design utility for creating standard, soft, floating, glowing, and multi-layered CSS box shadows. Quickly configure horizontal and vertical offsets, blur radius, spread distance, color opacities, and inset inner shadows with live real-time preview and instant copy-paste CSS code.
Read more
How to Use the CSS Box Shadow Generator
- Adjust Shadow Offsets: Move the X Offset and Y Offset sliders to position the light source and shadow casting direction.
- Fine-Tune Blur & Spread: Use the Blur Radius slider to soften the shadow edges, and the Spread Radius slider to expand or contract the shadow perimeter.
- Select Color & Opacity: Pick any hex color and adjust the dedicated opacity slider for subtle, realistic depth.
- Create Multi-Layer Shadows: Click + Add Layer to combine multiple shadows into one natural, realistic elevation stack.
- Toggle Inset Mode: Check the Inset (Inner Shadow) box to cast shadows inside the element for pressed buttons, wells, and recessed inputs.
- Browse Presets: Click on any of the curated presets—from smooth cards and floating modals to vibrant neon glows and neo-brutalism outlines—to load them instantly.
- Copy CSS: Copy the ready-to-use
box-shadowproperty or complete CSS snippet straight into your project.
Understanding CSS box-shadow Syntax
The CSS box-shadow property accepts up to six components per layer:
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;1. Horizontal & Vertical Offsets (offset-x, offset-y)
offset-x defines horizontal distance (positive values move shadow right, negative move left). offset-y defines vertical distance (positive moves down, negative moves up).
2. Blur Radius (blur-radius)
A non-negative value defining how blurred the shadow edges appear. A value of 0px produces sharp, hard-edged shadows, while larger numbers create softer, smoother dispersion.
3. Spread Radius (spread-radius)
Expands (positive values) or contracts (negative values) the shadow perimeter before blur is applied. Negative spread is frequently used in modern web design to create crisp, high-end floating card shadows.
4. Inset Keyword
When present, changes the shadow from an outer drop shadow to an inner recessed shadow drawn inside the element border box.
5. Multi-Layer Shadows
Multiple shadows can be chained together with commas (e.g. box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);). Layering two or more subtle shadows produces far more natural and realistic light simulation than a single heavy shadow.
FAQ
What is the difference between blur radius and spread radius?
Blur radius determines the fuzziness or softness of the shadow edge, whereas spread radius actually increases or decreases the physical size/area of the shadow before it gets blurred.
Why do multi-layer shadows look more realistic?
In physical optics, light sources cast both a tight, sharp contact shadow (umbra) and a wider, softer ambient shadow (penumbra). Combining a small, dense shadow layer with a larger, faint shadow layer mimics natural ambient light.
How do I create an inner/inset shadow with CSS?
Add the inset keyword at the beginning or end of your box-shadow declaration: box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);.
Is CSS box-shadow supported across all browsers?
Yes. CSS box-shadow is fully supported across all modern web browsers, including Chrome, Firefox, Safari, Edge, Opera, iOS Safari, and Android browsers.
