CSS Box Shadow Generator
Adjust the shadow direction, blur and colour to generate CSS box-shadow code.
How to use the CSS Box Shadow Generator
- Set the X and Y offsets to move the shadow sideways and down. Negative values push it left and up.
- Raise blur to soften the edge, and spread to grow or shrink the shadow shape.
- Pick the shadow colour and set the opacity percentage; the two combine into an rgba value.
- Press copy, then paste the line into the CSS rule for your element.
Reading the four lengths in the generated value
The output follows the CSS order: horizontal offset, vertical offset, blur radius, spread radius, then colour. Blur fades the edge outward, while spread resizes the shadow shape before the blur is applied.
Why the opacity setting does more work than the colour
The colour box hands over a hex value and the opacity percentage becomes the alpha in the rgba colour, rounded to two decimals. Shadows read as depth when they are a low-opacity dark colour rather than a solid grey block.
Frequently asked questions
Can I layer multiple shadows?
One shadow at a time. In CSS you can combine several by separating them with commas, which is how realistic depth is usually built.
How do I use the code?
Press copy and paste it into the box-shadow property of your CSS rule.
Does it support inset shadows?
Outer shadows only in the current version.
How do I put the shadow above the element?
Use a negative Y offset. Positive Y pushes the shadow down the page, so -8 places it eight pixels above the box.
Can I copy only the value without the property name?
The copy button hands over the whole declaration, including box-shadow: and the semicolon. Delete the property name if you are pasting into a design token.
Does the preview match what I will get?
Yes. The preview box carries exactly the same box-shadow value that appears in the code, so what you see is what the copied line produces.