CSS Box Shadow Generator
Preview the numbers behind a CSS box shadow and copy its code.
Quick answer: enter your details below and click Generate shadow — your result appears instantly, right here in your browser. Nothing you enter is uploaded or stored.
C
Image & Design
Enter your details below.
How to use
- Enter the offset, blur and spread.
- Pick a colour and opacity.
- Copy the box-shadow line shown.
About this tool
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.
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.