CSS Box Shadow Calculator
Generate a CSS box-shadow rule.
Work It Out And Get Clear Answers
Generate a CSS box-shadow rule.
CSS Box Shadow Estimator
Enter your numbers below for an instant estimate.
How It Works
Key concepts behind this calculator
Enter Values
Fill in each field with your own numbers.
Calculate
Press Calculate to see the result.
Review
Read the breakdown and the explanation.
Adjust
Change values to compare scenarios.
CSS Box Shadow Quick Guide
Typical values for reference.
| Horizontal offset (px) | Vertical offset (px) | Blur (px) | CSS rule |
|---|---|---|---|
| 4 | 4 | 10 | box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.25) |
| 2 | 4 | 10 | box-shadow: 2px 4px 10px 0px rgba(0,0,0,0.25) |
| 8 | 4 | 10 | box-shadow: 8px 4px 10px 0px rgba(0,0,0,0.25) |
| 4 | 2 | 10 | box-shadow: 4px 2px 10px 0px rgba(0,0,0,0.25) |
| 4 | 8 | 10 | box-shadow: 4px 8px 10px 0px rgba(0,0,0,0.25) |
| Rule of thumb: check your inputs, use the result as a guide and round sensibly. | |||
CSS Box Shadow FAQ
Answers to common questions about this calculator.
Shadow syntax: x-offset y-offset blur spread colour.
It uses the default inputs shown and the formula described above. Change any value and press Calculate to see how the result moves.
It is an estimate based on the inputs you enter. Check real quotes, labels, product data or official guidance for important decisions.
Yes. Replace each input with your own figures and press Calculate to update the result.