← All Tools
Box Shadow Generator Formatter🔒 100% local
Generate box-shadow CSS. Privacy-first, no server uploads, no tracking.
Related Tools
Reads a single box-shadow declaration and normalizes it: unitless offsets gain px, missing blur and spread default to 0, and the colour is carried onto a four-step shadow scale plus a layered variant. Expected order is [inset] offsetX offsetY [blur] [spread] colour, and a value with no colour token is refused. The declaration is parsed in the page.
How to use it
- Paste one shadow, for example 0 4px 6px rgba(0,0,0,0.1).
- Press Process.
- Take the normalized line for an exact match, or one of the scale lines for a consistent set of elevations.
Worked example
0 4px 6px rgba(0,0,0,0.1)becomesInput shadow: 0 4px 6px rgba(0,0,0,0.1)
Normalized:
box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
Ready-to-use scale (same color):
/* Subtle */ box-shadow: 0 1px 2px rgba(0,0,0,0.1);
/* Medium */ box-shadow: 0 4px 6px rgba(0,0,0,0.1);Real output with the remaining scale lines omitted; the offsets come back with explicit px units.
inset 0 2px 4px rgba(0,0,0,0.25)becomesNormalized:
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.25);The inset keyword is detected and kept in front of the offsets.
When to use it
- Turning a shadow lifted from an existing stylesheet into a consistent four-step scale.
- Repairing a shadow value that lost its units when it was copied through a design tool.
- Getting matching depth for a card, a dropdown and a modal without hand-editing four declarations.
What it does not do
- Nothing is rendered: there is no preview box, only CSS text.
- One shadow per run. A comma-separated stack of shadows does not match the parser and is rejected.
- The colour is whatever trails the numbers, unvalidated, so 0 4px 6px blueish is accepted and printed inside a declaration the browser will drop.
- Spread survives only in the normalized line; the generated scale entries use blur alone.
- Border-radius blobs, filters and text shadows are outside its scope.