ZumaTools

CSS box shadow generator

Adjust offsets, blur, spread and color, stack multiple shadow layers, and copy the finished CSS.

Preview background
Layers

The first layer paints on top — small sharp shadows first, large soft ones after.

Editing layer 1 of 2

CSS
box-shadow:
  0px 1px 3px 0px rgba(0, 0, 0, 0.07),
  0px 8px 24px -4px rgba(0, 0, 0, 0.12);

Rendered by your own browser — the preview is exactly what the CSS will look like.

How it works

  1. Pick a preset or adjust the sliders — X/Y offset, blur, spread, color and opacity — and watch the preview card update live.
  2. Add more layers to build depth: each layer is one shadow, and they compose into a single box-shadow value. Reorder or remove layers from the list.
  3. Copy the generated CSS and paste it straight into your stylesheet.

Frequently asked questions

Why do layered shadows look better than a single shadow?
Real light produces both a tight dark contact shadow and a wide faint ambient one, and a single box-shadow can only approximate one of them. Stacking two to five layers — small sharp shadows underneath, large soft ones above — reproduces that falloff and looks dramatically more natural. The layered presets here are built exactly this way.
What is the difference between blur and spread?
Blur softens the shadow’s edge without changing its overall footprint much, while spread grows (positive) or shrinks (negative) the shadow rectangle itself before blurring. A common trick is a large blur with a slightly negative spread, which keeps a soft shadow from leaking out past the sides of the element.
What does the inset keyword do?
An inset shadow is drawn inside the element’s border box instead of behind it, making the element appear recessed rather than raised. It is commonly used for pressed button states, input fields and subtle inner borders. You can mix inset and outer layers freely in one box-shadow value.
Do box shadows affect page performance?
Modern browsers rasterize shadows once and cache the result, so static shadows — even five layers deep — cost almost nothing. The expensive case is animating blur or spread directly, which forces a repaint every frame; animate opacity or transform on a pre-shadowed element instead.
Is anything I design here uploaded or saved?
No. The tool is plain client-side code: the preview is rendered by your own browser’s CSS engine and the output string is assembled locally. Nothing is sent to a server, and the generated CSS works in every modern browser without prefixes.

About this tool

The box-shadow property looks simple — four lengths and a color — but the gap between a default drop shadow and a shadow that feels physically right is wide. This generator closes that gap by making every parameter visible and adjustable in real time: horizontal and vertical offset, blur radius, spread, color with separate opacity, and the inset keyword, all rendered on a preview card whose background color you control so you can judge the result against your actual page tone.

Its core feature is layering. CSS accepts any number of comma-separated shadows in one declaration, and that is how convincing depth is actually built: a tight, darker shadow suggests contact with the surface, while one or two progressively larger, fainter layers stand in for ambient occlusion. The layer list lets you add, remove and reorder shadows freely — the first layer in the list paints on top, matching how browsers interpret the value — and the presets give you proven starting points: a soft two-layer shadow, a material-style elevation stack, a hard offset for brutalist designs, and a five-layer smooth ramp that doubles offset and blur at each step.

Everything happens in your browser. The preview is your own rendering engine drawing the exact CSS you will ship, so there is no approximation and nothing to upload; the output is a standard box-shadow declaration supported without prefixes in every current browser.

A few practical tips: keep shadow opacity low — real shadows rarely exceed 20% — and prefer several faint layers over one dark one. Use a slightly negative spread with large blurs to stop shadows bleeding past the element’s sides. And derive the shadow color from your background hue rather than pure black; a desaturated dark blue on a cool page reads as depth, while plain black often reads as dirt.

Related tools