CSS Box Shadow Generator
Drag sliders to adjust x-offset, y-offset, blur, spread, and opacity, pick a color, toggle inset, and see the shadow live on a preview box. Copy the ready-to-paste CSS property. Everything runs in your browser.
Generate one CSS box-shadow declaration visually by adjusting horizontal and vertical offsets, blur, spread, opacity, color, and the optional inset keyword.
How to generate a CSS box shadow
- Move the X and Y sliders to position the shadow.
- Adjust blur, spread, opacity, color, and inset mode.
- Preview the result and copy the generated box-shadow declaration.
How this generator works
The tool converts the chosen hex color to rgba() and rounds opacity to two decimal places.
It generates a single box-shadow value; it does not build multiple layered shadows or text-shadow values.
Privacy and limitations
All controls and preview updates run in your browser. The generator is limited to the slider ranges shown in the UI and outputs one box-shadow declaration at a time.
CSS box-shadow FAQ
Does it support inset shadows?
Yes. Enable Inset to prepend the inset keyword.
Can it create multiple shadows?
No. It creates one shadow layer.
What color format is generated?
The selected hex color is converted to rgba().
Can spread be negative?
Yes. The slider allows negative spread values.
Does it upload anything?
No. The generator runs locally in the browser.