Box Shadow Generator
Free online box shadow generator that runs entirely in your browser.
How the Box Shadow Generator works
The Box Shadow Generator works on Offset X (px), Offset Y (px), Blur (px), Spread (px), Opacity % and shows the result as you type. The same input always gives the same answer — refresh the page and you will see exactly the same figure.
Formula used
Box Shadow Generator is computed by the formula below, using the inputs you provide.
Inputs used: Offset X (px), Offset Y (px), Blur (px), Spread (px), Opacity %.
Worked example
Take the default example — offset x (px) of 25, offset y (px) of 200:
- Shadow character: soft
- css: box-shadow: 25px 200px 10px 0px rgba(0, 0, 0, 0.2);
- output: box-shadow: 25px 200px 10px 0px rgba(0, 0, 0, 0.2);
Frequently asked questions
- Is the Box Shadow Generator free?
- Yes. There is no signup, no usage limit and no watermark — the calculator runs entirely in your browser.
- Does the Box Shadow Generator store or send my data?
- No. Every calculation happens locally in the page, so the numbers you type are never uploaded or logged.
- Does it work on a phone and offline?
- Yes — the page is a single lightweight file that adapts to any screen size. Once it has loaded it keeps working without a network connection.
- What inputs does the Box Shadow Generator need?
- Offset X (px), Offset Y (px), Blur (px), Spread (px), Opacity %. Change any of them and the result updates instantly.