Design CSS box shadows visually and copy the code.
Loading Box Shadow…
How to use Box Shadow
Open the Box Shadow tool.
Paste or type your color value into the input field.
The output updates as you type. Adjust the options if you need a different format.
Copy the result, or share the URL to hand the exact input to someone else.
About Box Shadow
Design a CSS box-shadow visually. Drag sliders for offset X/Y, blur and spread, set the color and opacity, toggle inset, and watch a live preview update. Copy the ready-to-paste box-shadow value.
What people use it for
Dial in an elevation shadow for a card or button.
Create an inset shadow for an input or well.
Copy a precise box-shadow value into your CSS.
Frequently asked questions
Can it do inset shadows?
Yes. Toggle inset, and adjust offset, blur, spread, color and opacity with a live preview.
Is it private?
Every calculation happens on this page, in your own browser. Your input is never sent to a server and never logged, which also means the tool keeps working when you are offline.