How to write a CSS box shadow
Shadows add depth to cards and buttons, but the four numbers can be confusing. This guide explains each one in plain language.
What is the CSS Box Shadow Generator?
This tool turns offset, blur, spread, colour and opacity into one box-shadow declaration. It does not draw a live preview box, it gives you the exact values to paste into your own stylesheet.
How to use it
- Enter the offset, blur and spread.
- Pick a colour and opacity.
- Copy the box-shadow line shown.
Worked example
A soft shadow offset 10px down and right, blurred by 20px at 30% black opacity.
What do the box-shadow numbers mean?
The first two move the shadow, the third softens it, and the fourth expands or contracts it.
Frequently asked questions
What does blur do?
A larger blur makes the shadow edge softer and more spread out.
What does spread do?
Spread grows or shrinks the shadow beyond the element's edges.