Box Shadow Generator
Box Shadow Generator — runs in your browser. Inputs are not stored.
Box-shadow generator
Enter values, then press Calculate.
Preview
Adjust the sliders and the box-shadow CSS updates instantly.
How to use
- Set shadow position with the X offset and Y offset sliders or numbers. Defaults are X 0, Y 8.
- Adjust Blur and Spread. Default blur is 24.
- Match shadow color and the opacity slider. Opacity percent is shown beside it.
- Turn on inset for an inner shadow. Check it on the preview box immediately.
- Copy the CSS below into a stylesheet. Reset restores defaults.
Key concepts
This box-shadow generator is for tuning box-shadow on cards, buttons, and modals. X and Y are how far the shadow sits, blur is edge softness, and spread is shadow area. Combining color and alpha lets you make brand-colored shadows instead of gray. CSS updates as soon as you move a slider.
Inset puts the shadow inside the box, which fits pressed inputs or inner shading. The preview is a white rounded rectangle for a light background. Generation runs only in the browser. This screen makes one layer; for stacked shadows, join copied values with commas.
Example
Defaults of Y 8, blur 24, and 25% opacity give a soft downward shadow. Raising X and Y to 12 deepens a lower-right shadow; turning on inset converts the same values to inner shade. Paste the copied CSS inside a selector. Card lists often reuse one shadow for hierarchy and give modals a larger blur. On dark backgrounds you may need higher alpha than the white preview suggests. Putting the copied declaration in a media query lets you reduce spread on mobile. When retrying the same input, reset and paste fresh so previous output does not mix in. On a shared computer, clear fields when you finish. Closing the tab drops the values; you do not need a server delete request.
Related: gradient generator · color picker
Frequently asked questions
When do I use inset in box-shadow CSS?
It is an inner shadow. Use it for inner card shade or a pressed-button look.
Are box-shadow values sent to a server?
No. Preview and the string are built only in the browser.
Can I make stacked shadows?
This tool makes one layer. Join copied declarations with commas for several layers.
Where does opacity go?
It becomes the color’s alpha. Read the percent beside the slider.
What is the difference between spread and blur?
Blur softens the edge; spread grows or shrinks the shadow size.
Can I change the preview background?
The preview is a fixed white box. Check again on your real page background.
Last reviewed: 2026-09-04