Craft single or multi-layer CSS box-shadows with offset, blur, spread, inset, color, and opacity. Live preview and one-click CSS copy.
Ad placeholder — top banner
Ad placeholder — content
Introduction
Elevation and depth in modern interfaces often come from carefully tuned box-shadow values rather than heavy images. A soft ambient shadow under a card, a tight contact shadow under a button, or an inset well for pressed controls each need different offsets, blurs, and opacities. This generator turns those knobs into live CSS so you can match design system tokens without guessing pixel values.
Everything runs in the browser. There is no cloud render step and no account. Layer stacking uses the standard comma-separated box-shadow syntax that every modern browser understands, including inset layers mixed with outer layers.
How it works
Each layer stores horizontal and vertical offset, blur radius, spread radius, color, opacity, and an inset flag. Opacity is applied as an RGBA color so you can keep a pure hex brand color while softening the shadow independently. The preview box updates on every change; the CSS panel always reflects the full multi-layer string ready to paste into a stylesheet or utility class.
Adding layers lets you approximate natural light: a larger soft shadow for ambient light plus a smaller darker shadow for direct light. Remove layers when you only need a single elevation step.
Common use cases
Designers prototype Material-style elevations. Developers port Figma drop shadows into CSS. Component libraries document shadow tokens. Dark-mode themes reduce opacity instead of pure black for cleaner results. Pair with the Border Radius Generator and CSS Gradient Generator to finish a card visual system.
Benefits
Live multi-layer editing, accessible form controls, mobile-friendly layout, copy-to-clipboard helpers, and private local processing make this tool suitable for daily product work without installing desktop software.
Design system guidance
Document a small set of elevation levels (for example 0, 1, 2, 3) instead of inventing unique shadows per component. Multi-layer shadows with low opacity look more natural than a single hard black blur. In dark mode, reduce opacity further and avoid pure black if your background is already near black—slightly lighter or tinted shadows read better.
Inset shadows help communicate pressed buttons, input wells, and recessed panels. Combining one inset layer with one outer layer can mimic physical depth. Test shadows against both light and dark surfaces; what looks soft on white may vanish on charcoal.
Copy the generated CSS into design tokens or utility classes. Prefer relative units only when your system requires them; pixel values remain the most portable for shadows across frameworks.
Examples
Soft card
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
Inset well
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
FAQ
Can I stack multiple shadows?
Yes. Use Add shadow layer; layers are joined with commas in one box-shadow declaration.
Does inset work with outer shadows?
Yes. Mix inset and non-inset layers freely.
Is anything uploaded?
No. Values stay in the page until you copy them yourself.
What is the CSS box-shadow property?
box-shadow adds one or more shadow effects around an element's frame. Its values are, in order, the horizontal offset, vertical offset, optional blur radius, optional spread radius, and color, with an optional inset keyword for inner shadows.
What do the blur radius and spread radius do?
The blur radius softens the shadow's edge; larger values make it more diffuse, and 0 produces a hard edge. The spread radius grows (positive) or shrinks (negative) the shadow's size before the blur is applied
How do I create an inner shadow instead of a drop shadow?
Add the inset keyword to the value, e.g. box-shadow: inset 0 2px 4px rgba(0,0,0,0.5). This casts the shadow inside the element's border rather than outside it. Toggle Inset in this tool to switch modes.
Can I apply more than one shadow to an element?
Yes. Provide a comma-separated list of shadows, e.g. box-shadow: 0 1px 2px #000, inset 0 0 4px #333. They are painted front to back, with the first shadow on top.