📦 CSS Box Shadow Generator
A CSS shadow generator with sliders for offset, blur, spread and color, plus layering, inset, live preview and one-click copy of the box-shadow.
CSS Code
box-shadow: 0px 10px 20px -3px rgba(0, 0, 0, 0.15);
What CSS Box Shadow Generator Does
A CSS shadow is four numbers and a color, and the difference between a shadow that reads as depth and one that reads as a smudge is almost entirely in how those numbers relate to each other. Offset moves it, blur softens it, spread grows or shrinks it before the blur is applied, and the color — usually with alpha — decides how present it is.
The most common mistake is a shadow that is too dark and too tight. Real shadows are soft and low-contrast: light comes from above, so vertical offset should exceed horizontal, blur should be noticeably larger than the offset, and the alpha should be low enough that the shadow suggests elevation rather than drawing attention to itself.
Layering is what separates a convincing shadow from a flat one. A single shadow has one falloff; real depth has several, because light scatters. Two or three shadows — a tight dark one for contact and a wide faint one for ambient light — read as physical in a way that one never does, and the syntax supports it with a comma-separated list.
The other thing worth knowing is that box-shadow and text-shadow are different properties with different syntax: text-shadow has no spread parameter, and inset is only available on box-shadow.
How to Use CSS Box Shadow Generator
- Choose a shadow preset (Subtle Card, Floating Elevation, Neumorphism, Inset)
- Adjust horizontal/vertical offset, blur, spread, color, and opacity sliders
- Inspect the live 3D preview box and copy the CSS snippet directly into your stylesheet
Formula Used by CSS Box Shadow Generator
The box-shadow parameters, in order
box-shadow: [inset] offset-x offset-y blur spread color
- offset-x / offset-y
- how far the shadow moves; positive y is downward, which is what a light source above produces
- blur
- the softness of the edge — roughly twice the offset is a good starting point
- spread
- grows or shrinks the shadow before blurring; a negative spread tightens it
- inset
- draws the shadow inside the box instead of outside
Worked example
A card sitting slightly above the page.
- No horizontal offset — the light is directly above
- Small vertical offset: 4px
- Blur about double: 12px
- Low alpha so it suggests rather than states: rgba(0,0,0,0.12)
Result: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) — the shape most interface cards actually use.
Elevation as a set of shadows
A usable scale. Higher elevation means larger offset and blur with lower opacity, because a more distant surface casts a more diffuse shadow.
| Level | Shadow | Reads as |
|---|---|---|
| Subtle | 0 1px 2px rgba(0,0,0,0.08) | A hairline lift — inputs, list rows |
| Low | 0 2px 6px rgba(0,0,0,0.10) | Resting cards and buttons |
| Medium | 0 4px 12px rgba(0,0,0,0.12) | Raised cards, hover states |
| High | 0 8px 24px rgba(0,0,0,0.15) | Dropdowns and popovers |
| Highest | 0 16px 48px rgba(0,0,0,0.20) | Modals over an overlay |
How to Read Your Result
Layer two shadows rather than deepening one
A tight, slightly darker shadow for the contact edge plus a wide, very faint one for ambient light produces depth that a single shadow cannot. They go in one declaration separated by a comma, and the first in the list is painted on top.
Keep the light in one place
If some elements have shadows below and others to the side, the interface looks like it is lit from several directions at once, which reads as wrong without anyone being able to say why. Pick a direction — almost always straight down — and apply it everywhere.
Shadows do not work on dark backgrounds
A black shadow on a dark surface is invisible, which is why dark themes convey elevation with lighter surface colors instead. Do not try to solve it by increasing the alpha; use a lighter background for the raised element.
Limitations & Accuracy Notes
- box-shadow and text-shadow only. drop-shadow() as a filter behaves differently — it follows the alpha of the actual shape rather than the box — and is not generated here.
- Large blur values on many elements are expensive to paint and can cost scrolling performance on lower-powered devices.
- The preview sits on this page’s background; on your own surface the same shadow will read differently.
- No dark-mode variant is generated, and shadows generally need rethinking rather than adjusting for dark themes.
Frequently Asked Questions
What are the 5 components of a CSS box-shadow property?
How do I create smooth modern shadow elevations?
What do the box-shadow values mean?
What does the inset keyword do?
How do I make a shadow look realistic?
What is the difference between box-shadow and drop-shadow?
Do shadows affect layout?
Are shadows expensive to render?
References & Further Reading
- MDN — box-shadow — Parameter order, the inset keyword, and how comma-separated shadows are painted
- MDN — text-shadow — The text variant, which has no spread parameter