CSS Box Shadow Generator
Adjust offset, blur, spread, and color to create a CSS box-shadow, preview it on a card, and copy the code.
Your input stays in your browser. Nothing is uploaded.
About this tool
The output is box-shadow: X Y blur spread color. Positive X moves the shadow right and positive Y moves it down. Blur softens the edge, and spread grows or shrinks the shadow before blurring (negative spread makes it smaller than the element). The color is taken as a solid HEX value; soft, realistic shadows usually need transparency, so consider replacing it with, for example, rgb(0 0 0 / 15%) in the copied CSS.
How to use it
- Set the X and Y offsets in pixels.
- Adjust blur and spread.
- Pick a color and copy the CSS.
Examples
Soft card shadow
0px 8px 24px 0px with a semi-transparent black gives a gentle lift.
Hard offset shadow
6px 6px 0px 0px #000000 creates a flat, graphic-style shadow.
FAQ
Can I make an inset shadow?
Add the inset keyword at the start of the copied value, for example box-shadow: inset 0 2px 4px …
Can I stack several shadows?
Yes, in CSS. Separate shadows with commas in the copied value.
Is anything uploaded?
No.