CSS Box Shadow Generator
Design soft, layered CSS box shadows with a live preview — then copy the CSS.
Result
How to use
- 1
Move the sliders to set the offset, blur, spread, colour and opacity of the shadow.
- 2
Press Add layer to stack several shadows for a softer, more realistic look — click a layer to edit it.
- 3
Try a preset, then press Copy CSS.
Questions
What do the box-shadow values mean?
box-shadow: x-offset y-offset blur spread colour. Positive x moves the shadow right, positive y moves it down. Blur softens the edge and spread grows (or, if negative, shrinks) the shadow.
Why use more than one layer?
Real shadows are soft near the object and fade far away. Stacking a small sharp shadow with a large blurred one looks more natural than a single shadow.
Do I need -webkit-box-shadow?
No. Every current browser supports the plain box-shadow property.
About this Box Shadow tool
CSS Box Shadow Generator — Design soft, layered CSS box shadows with a live preview — then copy the CSS. It is one of 200 free tools on namasivayam.in, made by software engineer Namasivayam Vadivelan for everyday use in India.
Everything is calculated instantly in your browser: nothing you type or upload is sent to any server, there is no sign-up, and it works on mobile and desktop. Move the sliders to set the offset, blur, spread, colour and opacity of the shadow.
Related reading
Articles that go with this tool
How AI Chatbots Actually Work — Explained Simply, Without the Jargon
AI chatbots can write emails, explain code and plan trips. But how do they really work, why do they sometimes confidently get things wrong, and how should you use them wisely?
Passkeys Explained: The Simple, Safer Way to Log In Without Passwords
Google, Apple and Microsoft now let you sign in with passkeys instead of passwords. What a passkey is, why it can’t be phished, and how to set one up in five minutes.
Public Wi-Fi Safety: 8 Rules Before You Connect at Airports, Cafés and Hotels
Free Wi-Fi is convenient, but it can expose your data to strangers on the same network. Eight simple rules to stay safe on airport, café, railway and hotel Wi-Fi.
Related tools
More colour tools you may like
Results are estimates to help you plan. They are not financial, tax or medical advice.