CSS Box Shadow Generator — Live Preview
Tune a CSS box-shadow for cards, buttons and other interface elements
Runs in your browser · nothing is uploaded
Positive horizontal and vertical offsets move right and down. Negative spread shrinks the shadow.
Shadow CSS generated.
How to use
- Choose horizontal and vertical offsets to position the shadow.
- Adjust blur and spread to control its softness and size.
- Select a color and opacity. Enable inset for a shadow inside the element.
- Review the live preview and copy the generated
box-shadowdeclaration.
What the values mean
A positive horizontal offset moves right; a negative one moves left. Positive vertical offsets move down, and negative values move up. Blur must be zero or greater. A larger blur softens the boundary. Positive spread enlarges the shadow shape, while negative spread contracts it.
Colors are emitted as RGB channels with an alpha value. For example, 25% opacity becomes rgba(0, 0, 0, 0.25). Enabling the inset option places inset at the beginning of the shadow value.
Example
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25); creates a soft black shadow offset eight pixels downward. A zero horizontal offset keeps it balanced from left to right.
To make a shadow feel tighter, compare a negative spread with a lower blur value: they change different parts of the effect. For inset shadows, review the result at the final component size, since the available inner area changes how much shadow is visible.
Limits and application
Offsets and spread range from -100 to 100 pixels. Blur ranges from 0 to 200 pixels, and opacity from 0 to 100%. This generator creates one shadow; layered effects require editing the copied CSS to include additional comma-separated values.
The preview uses a fixed-size box. Your actual element’s dimensions, corner radius, background and ancestor overflow rules can alter the appearance. A shadow does not allocate layout space, so leave enough room around the final component when the effect extends beyond its border.
FAQ
How are blur and spread different?
Blur softens the edges of a shadow. Spread expands or contracts its shape before the blur is applied. A negative spread value makes the shadow smaller.
What does inset do?
Inset draws the shadow inside the box instead of outside it. It can help create recessed fields or pressed-button effects.
Why might a shadow be clipped on my page?
An ancestor's overflow settings or available space can clip the shadow. The preview also clips portions of very large shadows that extend beyond its frame.
