Box Shadow Generator
Drag offset, blur and spread to preview a shadow instantly, and get a box-shadow rule you can paste straight into your stylesheet.
Runs in your browser: input and output are never sent to the server, and the platform does not store your input.
Output
Fill in the fields on the left, then run.
How to use
- 1Adjust offset, blur and spread.
- 2Pick the colour and opacity.
- 3Copy the box-shadow rule.
FAQ
Why is the output rgba?
Colour and opacity are combined into rgba(), so you can tune shadow strength without a separate opacity setting.
What does spread do?
It grows or shrinks the shadow uniformly. Negative values keep the shadow under the element, which is the usual look for cards.
Can I layer several shadows?
Yes — copy multiple results and join them with commas.