ToolStack › Box Shadow Generator
Developer · CSS Tool

BOX SHADOW
GENERATOR

Build layered CSS box shadows visually. Stack multiple shadows, tweak every parameter, preview live, and copy production-ready CSS in one click.

Canvas BG
Box
R
CSS Output
Presets
Shadow Layers

Box Shadow Syntax

box-shadow: offset-x offset-y blur spread color. Offset-x/y move the shadow, blur softens edges, spread expands/contracts the shadow. Inset makes it an inner shadow. Multiple shadows are comma-separated.

Layering Shadows

CSS supports multiple comma-separated shadow layers. First shadow in the list renders on top. Combining a hard shadow (low blur) with a soft shadow (high blur) creates realistic depth. This is how design systems like Tailwind build their shadow scales.

Inset Shadows

Adding the inset keyword moves the shadow inside the element, creating a pressed/embossed effect. Useful for inputs, toggle switches, and cards that should appear recessed rather than raised.

Performance Note

Box shadows trigger paint but not layout. They are GPU-accelerated in modern browsers. For animation, prefer filter: drop-shadow() on elements with transparent backgrounds, or animate opacity on a pseudo-element shadow.

FAQ
What's the difference between box-shadow and filter: drop-shadow? ▾
box-shadow follows the element's box boundary (rectangular with optional border-radius). filter: drop-shadow follows the actual visible shape, including transparent areas. So on a PNG with a transparent background, drop-shadow traces the image outline, while box-shadow gives a rectangular shadow.
How do I make a shadow without a visible offset? ▾
Set offset-x and offset-y both to 0 and use only blur and/or spread. For example: box-shadow: 0 0 20px 5px rgba(0,0,0,0.3) creates an even glow effect around all sides. Useful for focus rings and glowing UI elements.
How do I create a neumorphic shadow effect? ▾
Neumorphism uses two shadows — one lighter than the background (top-left), one darker (bottom-right). Match the element and background color exactly. Example: on #e0e5ec background, use box-shadow: 5px 5px 10px #b8bcca, -5px -5px 10px #ffffff.
Advertisement
Frequently Asked Questions
What does each box-shadow value mean? ▾
The shorthand is: offset-x offset-y blur-radius spread-radius color. Offset-x moves the shadow right (negative = left). Offset-y moves it down (negative = up). Blur radius softens the edge — 0 gives a hard edge. Spread radius expands or contracts the shadow. Inset makes the shadow appear inside the element rather than outside.
Can I add more than one shadow? ▾
Yes. CSS box-shadow accepts a comma-separated list of shadows. Use the 'Add Layer' button in this tool to stack multiple shadows. A common technique is to combine a large soft shadow with a small hard shadow to create depth that feels more realistic and three-dimensional.
Why doesn't my shadow show in some browsers? ▾
Box-shadow is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. If you're targeting very old IE (below IE9), you may need filter: drop-shadow() as a fallback. The inset keyword is also universally supported. Always copy the generated code and test in your browser's developer tools.
What's the difference between box-shadow and filter: drop-shadow? ▾
box-shadow follows the rectangular box model — it respects border-radius but ignores transparent areas inside the element. filter: drop-shadow() follows the actual visible shape of the element, including transparent cutouts. For images with transparency or complex SVG shapes, filter: drop-shadow() usually looks better. For standard div elements, box-shadow is simpler and performs better.
How do I make an inner glow effect? ▾
Use inset in your shadow value with a colour matching your desired glow, a blur of 10–20px, and no offset: box-shadow: inset 0 0 15px rgba(59,130,246,0.4). Combine an inset glow with a standard outer shadow for a layered depth effect. Use this generator's inset toggle to preview it live.
Related Tools
🎨
CSS Gradient Generator
Linear · Radial · Copy-ready CSS
→
🎯
Colour Picker
HEX · RGB · HSL · Palette generator
→
{ }
JSON Formatter
Format · Validate · Minify · Error highlight
→
Aa
Text Case Converter
camelCase · snake_case · Title Case · more
→
How to Use the Box Shadow Generator

Build CSS box shadows visually with live preview — no maths required.

01
Adjust the offset sliders
Horizontal offset moves the shadow left/right. Vertical offset moves it up/down. Positive values go right/down; negative go left/up.
02
Set blur and spread radius
Blur softens the shadow edges. Spread expands or contracts the entire shadow. For a tight, realistic shadow: low blur, zero spread.
03
Choose shadow colour and opacity
Click the colour swatch to pick a colour. Shadows are almost always dark — try rgba(0,0,0,0.2) for a natural look on white backgrounds.
04
Add multiple shadow layers
Click '+ Add layer' to stack shadows. Multi-layer shadows create more realistic depth — one tight dark shadow plus one soft ambient shadow.
05
Copy the CSS
Click 'Copy CSS' and paste directly into your stylesheet. The output is a single box-shadow property ready to use.
💡
💡 For a popular 'neumorphism' effect, use two shadows — one light (white, top-left) and one dark (grey, bottom-right) on a medium-grey background.