Syntax guides list box-shadow values and call the last three optional. A generator cannot leave anything optional, because it emits one string per state. Ours writes every value, always in the same order, always with the same units. Learn to read that string and every tutorial example becomes trivial to reconstruct. This guide decodes the real component output, including the corners where its defaults can mislead you.
The template every layer follows
Each layer emits five parts: the word inset when the checkbox is set, then horizontal offset, vertical offset, blur, spread, then one color as 8 digit hex. Multiple layers join with a comma and a space on a single line.
The tool opens with one layer. Its copied output reads:
box-shadow: 0px 4px 16px 0px #00000040;
Decode it. Zero horizontal shift. 4 px downward. 16 px blur. Zero spread. Black at alpha 40 in hex, which is 64 of 255, or 25 percent opacity. Every length carries px, including both zeros, and the color always carries eight digits. The generator never writes rgba and never shortens hex, so output from different sessions always matches shape.
A worked example: two layers with inset
Start from the default state and press the add shadow button. The new layer arrives as an exact copy of the default, 0, 4, 16, 0, with color 00000040. Check the inner shadow box on the second layer and drag its spread slider to 2. The output becomes:
box-shadow: 0px 4px 16px 0px #00000040, inset 0px 4px 16px 2px #00000040;
Two rules follow from this one string. First, the browser paints the first listed shadow on top, so reversing the same two layers changes the visible result. Order your layers deliberately. Second, inset moves the shadow inside the border box, and the 2 px spread widens that inner shadow into a visible ring. That single edit is the standard recipe for pressed buttons and recessed inputs.
How the color channel really works
The color picker edits only the first six hex digits. The alpha lives in a separate opacity slider with a range of 0 to 255, and the component converts that number into the final two hex digits. Two consequences follow.
Drag opacity to zero and the layer turns invisible in the preview while remaining fully present in the output. The copied CSS then contains a layer that does nothing. Check the output panel before copying, not after pasting.
The picker cannot produce alpha and the slider cannot touch the RGB half. To recreate a color like slate at 60 percent you set the hex field and the slider separately. That split prevents the classic mistake of picking a translucent color in a dialog that only returns solid hex.
Ranges and their edges
Horizontal offset, vertical offset, and spread each run from -50 to 50. Blur runs from 0 to 100 and cannot go negative, which matches the property, where negative blur is invalid. Shadows that need more than 50 px of offset or spread require manual editing after the copy. That cap keeps the preview honest about what the sliders actually control, at the cost of large architectural shadows like long page-edge throws.
Why text shadow is the wrong sibling
The repository ships a text shadow generator beside this one. Its layers carry two offsets, blur, and color, with no spread slider and no inset checkbox, because text-shadow accepts neither value. Box shadow wraps the element rectangle and follows its border radius. Text shadow traces glyph outlines and knows nothing of the element shape. Pick the wrong property and you get shadows that refuse to soften around letters or that clip at a box you never drew. The rule is mechanical. Shadow on the box, use this generator. Shadow on the letters, use the text one.
Performance downsides stated plainly
Blur near the 100 slider cap on large surfaces raises paint cost, and every extra layer multiplies it. Animating between two box-shadow states repaints the surface on every frame. Animate transform or opacity instead and keep shadows static. A negative spread can shrink a shadow out of existence, which wastes a layer silently. The default look of small offset with large blur exists because it hides all these costs, and it is also why so many cards on the web look identical.
Checklist before you copy
- [ ] Read the output panel and confirm no layer sits at alpha 00 unseen.
- [ ] Confirm layer order, the first listed shadow paints on top.
- [ ] Check that inset lands on the intended layers only.
- [ ] Reserve blur near 100 for large surfaces you never animate.
- [ ] Paste into a rule block, the declaration already ends with a semicolon.
The generator runs at https://webrecast.com/en/box-shadow. Load the default layer, add one inset layer, and read the emitted string until the mapping from sliders to values is automatic. If your design needs a shadow our slider ranges cannot reach, send us the exact declaration and the use case, and we will compare it against what the tool emits today.
