Box Shadow Generator
Layer multiple CSS box-shadows with live preview. Offsets, blur, spread, color, alpha, and inset.
box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.35);
About the Box Shadow Generator
The Box Shadow Generator builds CSS box-shadow values by hand so you don't have to guess offset, blur, and spread numbers in your editor and reload to check them. It handles stacked shadows too, which is where hand-writing the property gets painful: a comma-separated list of layers that each need their own x, y, blur, spread, color, and inset flag. You adjust sliders and color pickers, watch a preview box respond, then copy the finished value.
Each layer holds seven values: horizontal and vertical offset (both -50 to 50px), blur (0 to 100px), spread (-30 to 30px), a hex color, an alpha from 0 to 1, and an inset checkbox. The tool converts your hex color plus alpha into an rgba() string, then joins every layer with commas into one box-shadow declaration. A preview square with adjustable background, box color, and corner radius updates as you drag, so you see the exact stack before copying.
Every shadow you build is rendered live in the page, so it is free with no account to create. Nothing you type is uploaded; the CSS is assembled in JavaScript on the page and the Copy CSS button writes to your clipboard locally. Use it when you want a soft elevation shadow, a hard offset, an inner shadow, or several layered together for depth, and you would rather move sliders than count pixels in your head.
How to use the Box Shadow Generator
- 1Drag the X, Y, Blur, and Spread sliders on Layer 1 to set the shadow's position and softness.
- 2Click the Color picker and drag the Alpha slider to set the shadow color and its transparency.
- 3Tick the inset checkbox if you want the shadow drawn inside the box instead of behind it.
- 4Press + Add layer to stack another shadow, and use the X button on any extra layer to remove it.
- 5Adjust the Box color, Background, and Radius demo controls so the preview matches your real design.
- 6Click Copy CSS to put the full box-shadow declaration on your clipboard.
What you can use it for
Card elevation
Give a content card a soft lift with a large blur, a small negative spread, and about 35 percent alpha. Drag Y down a few pixels and leave X at zero so the light reads as coming from straight above.
Layered neumorphism
Add two layers: one dark shadow offset down-right and one light shadow offset up-left, both with matching blur. The stacked list is written for you as a single comma-separated value, which is tedious to type by hand.
Inset input field
Tick inset on a layer, set a small blur and near-zero offsets, and pick a dark low-alpha color to make a text field or well look recessed into the page rather than raised above it.
Matching a mockup
Set the preview Box color and Background to the surfaces from your design file, then tune the sliders until the shadow looks right against those exact colors instead of the default dark theme.
Frequently asked questions
Does this send my settings anywhere?
No. The generator runs in your browser with client-side JavaScript. Your color choices and slider values never leave the page, and the Copy CSS button writes straight to your system clipboard. There is no account, no upload, and no server storing what you build.
Are the preview box color and radius included in the copied CSS?
No. Only the box-shadow property is copied. The Box color, Background, and Radius controls exist to preview your shadow against realistic surfaces, but they are not part of the output. Add your own background-color and border-radius rules in your stylesheet alongside the pasted box-shadow line.
How many shadow layers can I add?
The + Add layer button has no fixed limit, so you can stack as many layers as you need. Each new layer starts from the default values. When you have more than one layer, an X button appears on each so you can delete individual layers without clearing everything.
Why is my shadow color shown as rgba instead of hex?
You pick a hex color, but the tool combines it with the Alpha slider and outputs rgba(). That is how the transparency you set gets baked into the value. If you enter a color that is not a valid six-digit hex, that step is skipped and the raw value is used as-is.
What ranges do the sliders cover?
X and Y offsets run from -50 to 50px, blur from 0 to 100px, and spread from -30 to 30px, all in whole-pixel steps. Alpha runs from 0 to 1 in steps of 0.01. If your design needs a value outside these ranges, edit the copied CSS by hand afterward.
Does inset work with multiple layers?
Yes. The inset checkbox is per layer, so you can mix inset and outset shadows in the same box-shadow value. Each layer with inset ticked gets the inset keyword prepended, and the layers are joined in the order they appear from top to bottom.