CSS
CSS Box-Shadow Generator — Layered Shadows
Build single or layered box-shadows visually and copy the CSS.
Runs entirely in your browser — nothing you paste is uploaded or stored.
What is css box-shadow generator?
`box-shadow` is the CSS property that gives an element depth — a card that looks lifted off the page, a button with a subtle drop shadow, or a pressed-in inset effect. Its syntax packs five values (offset-x, offset-y, blur, spread, color) into one line, and getting a shadow to look right usually means tweaking numbers and reloading repeatedly. This tool lets you adjust each value with a live preview, layer multiple shadows for the soft, realistic look modern design systems use, and copy the exact CSS it produces.
When to use it
- Building a card or button shadow and seeing it rendered live instead of guessing pixel values.
- Recreating the soft, multi-layer shadow style common in modern design systems, which a single shadow layer can't produce convincingly.
- Creating an inset shadow for a pressed-button or input-field effect.
- Handing a designer-approved shadow off to a developer as a ready-to-paste CSS declaration.
How to use this tool
- Start from a preset — Soft, Elevated, Sharp, Long shadow, Neumorphic, Pressed or Glow — or build a shadow from scratch.
- Adjust the offset, blur and spread sliders for the first shadow layer; each slider is tinted to match that layer's own color, so it's obvious which control affects which layer.
- Pick a color with the swatch next to the color value field, and adjust its opacity with the dedicated opacity slider.
- Toggle "Inset" if you want the shadow to appear inside the element's edge rather than cast outward.
- Add another layer to build a softer, more realistic shadow — most well-designed shadows use two or three layers of different sizes and opacities.
- Copy the generated `box-shadow` declaration, or copy a link that restores this exact shadow to share with someone else.
Example
A single soft drop shadow.
Input
offset 0px 4px, blur 12px, spread 0px, rgba(0,0,0,0.35)Output
box-shadow: 0px 4px 12px 0px rgb(0 0 0 / 0.35);Paste this declaration directly into any CSS rule targeting the element you want to lift off the page.
A shadow needs a light background to read against
box-shadow renders using whatever color and opacity you set — it does not adapt to a
dark background automatically. If a card sits on a dark page, a shadow tuned for a light
background can disappear or look muddy; try a lighter, more opaque color, or a subtle
light-colored outline instead, for shadows on dark surfaces.
Getting an exact shadow colour
A shadow only reads correctly if its colour is exact, not eyeballed — especially at low opacity, where a slightly-off value is barely visible until it’s wrong in exactly the wrong way. Look up or convert the precise HEX, RGB or OKLCH value with the Color Converter before entering it above.
Frequently asked questions
Why do good shadows use multiple layers?
A single shadow with a large blur looks flat and artificial, because real shadows aren't uniform — they're sharper close to the object and softer further away. Layering two or three shadows of different size, offset and opacity approximates that falloff, which is why most modern design systems (Material Design, Tailwind's shadow scale) define their shadows as multiple comma-separated layers rather than one.
What does the spread value do, and when would I use a negative one?
Spread expands or shrinks the shadow's shape before the blur is applied — positive grows it, negative shrinks it. A common technique for the multi-layer style above uses a negative spread on the softer, larger-blur layer so it doesn't visually overwhelm the sharper layer beneath it.
What's the difference between box-shadow and a drop-shadow filter?
`box-shadow` always follows the element's box shape — its rectangle, or its border-radius if rounded. The `filter: drop-shadow()` CSS function instead follows the actual rendered alpha shape of the content, which matters for a non-rectangular image or icon with transparency, but is typically slower for the browser to render.
Why does my inset shadow look wrong on an element with a background image?
An inset shadow renders on top of the element's own background, inside its border — if the background is a busy image, a light shadow can be hard to see against it. Increasing the shadow's opacity or blur usually restores visibility; this is a rendering-order fact of the property, not something the generated CSS can work around.
Can I animate a box-shadow on hover?
Yes, using a CSS transition on the `box-shadow` property, but be aware it's a relatively expensive property to animate compared to `transform` or `opacity`, since the browser recalculates the shadow's shape on every frame. For a simple hover-lift effect, animating a small `transform: translateY()` alongside the shadow change usually performs better and looks smoother.
Find these tools useful? A coffee helps keep them free and ad-light.
Buy me a coffee