Calculator
What the CSS Box Shadow Generator does
CSS Box Shadow Generator: generates Status and CSS from Offset X, Offset Y and Blur. Example: offset x 0, offset y 8 and blur 24 gives status CSS ready.
The CSS Box Shadow Generator takes Offset X, Offset Y, Blur and Spread and returns Status and CSS. Results refresh instantly, so trying variations costs nothing but a moment.
Most of these tasks are one-liners in a terminal, but not when you are away from one. That is usually what brings people inspecting an API response here.
This runs client-side, which means we never receive what you enter and could not retrieve it if asked.
Further down the page: what each field expects, how the result is derived, and one example worked from the defaults.
What do the CSS Box Shadow Generator fields mean?
The CSS Box Shadow Generator uses 5 inputs. Every field is populated on load; treat those numbers as a template rather than a suggestion.
| Field | What to enter | Default |
|---|---|---|
| Offset X | optional | 0 |
| Offset Y | optional | 8 |
| Blur | optional | 24 |
| Spread | optional | -4 |
| Color | optional | rgba(15, 23, 42, 0.18) |
How does the CSS Box Shadow Generator work?
Each output is derived from the inputs above in a single pass; there is no hidden state carried between runs, so the same inputs always give the same generated output.
The guard clauses run before the formula does, which is why mistakes surface next to the field.
Worked example
These are the values the CSS Box Shadow Generator loads by default, and the result it produces from them. This walkthrough uses the starting values, which means you can follow along without typing anything.
| Offset X | 0 |
|---|---|
| Offset Y | 8 |
| Blur | 24 |
| Spread | -4 |
| Color | rgba(15, 23, 42, 0.18) |
| Status | CSS ready |
|---|---|
| CSS | box-shadow: 0px 8px 24px -4px rgba(15, 23, 42, 0.18); |
How to use it
- Put Offset X.
- Key in Offset Y.
- Fill in Blur.
- Type Spread.
- Enter Color.
- The output refreshes live, so you can stop as soon as the number looks right.
- The results panel then shows Status and CSS.
- Share the link rather than a screenshot. It carries the values with it.
What this tool does not do
- Output follows the common convention for this format; a specific toolchain may have its own house style.
- Processing happens in your browser, so extremely large inputs are bounded by available memory.
- It does not account for anything you did not enter, by definition.
- Check that each figure is in the unit the label asks for; that is the most common source of a wrong result.
Frequently asked questions
Offset X, Offset Y, Blur, Spread and Color. That is the whole form. Each field is pre-filled with a sensible default, which makes it easy to isolate the effect of a single variable.
With the values loaded when the page opens, status comes out as CSS ready. Change a value and the number is recomputed on the spot.
Nothing leaves your machine. The only network traffic is loading the page itself.
It is free to use, with no premium tier holding back the useful parts.
Reliable for the case described. Where more than one convention exists, the method section says which one is used.