Box Shadow Generator
Design CSS box shadows with a live preview. Adjust horizontal and vertical offset, blur radius, spread and color — then copy the CSS code.
How to use
- Use the sliders to adjust the shadow offset (X and Y), blur radius and spread.
- Pick a shadow color and optionally enable "Inset" for an inner shadow.
- The preview updates live — copy the CSS code with one click.
Frequently asked questions
What does each parameter do?
Offset X/Y moves the shadow horizontally/vertically. Blur radius softens the shadow edges. Spread expands or contracts the shadow. Color sets the shadow color including opacity. Inset makes the shadow appear inside the element.
How do I add multiple shadows?
CSS supports multiple box shadows separated by commas. Copy the generated value and add more shadows manually: box-shadow: 4px 4px 10px #000, -4px -4px 10px #fff;
Why does my shadow look different in the browser?
The preview uses the same CSS as your browser, so it should match exactly. Differences can occur if your element has a different background color or if you're comparing across different browsers.
What is an inset shadow?
An inset shadow appears inside the element rather than outside, creating a pressed or recessed effect. It is useful for input fields, buttons and card effects.