How to make a CSS box shadow
- Move the sliders for the first layer.
- Add more layers if you want a softer look.
- Copy the CSS.
About this tool
Design a shadow and see it on a sample box at once. Set how far it moves across and down, how blurred and how large it is, and its color and opacity. Add more layers to build soft, realistic shadows, and switch a layer to inset for a pressed look. Change the page and box colors to test on your own design, then copy the CSS.
Common questions
Why use more than one layer?
Real shadows have a sharp part near the object and a soft part further away. Two or three layers look more natural than one.
What does spread do?
Positive spread makes the shadow bigger than the box. Negative spread makes it smaller, which is useful for shadows that only show on one side.
What is inset?
An inset shadow is drawn inside the box edges instead of outside.
Is it free to use?
Yes. There's no sign-up, and you can use it as often as you like.
Is my text uploaded anywhere?
No. This tool runs inside your browser, so what you enter stays on your device.
Do I need to install anything?
No. It works in your browser on a computer or a phone.