Input
Preparing your workspace…
How to use
- Set the horizontal and vertical offsets, blur and spread.
- Choose a color and opacity; enable Inset if needed.
- Inspect the preview and select Copy CSS.
Building a box shadow
Box shadows can separate a card from its background or suggest an inset surface. The effect comes from a small set of values, so you can adjust it without preparing an image.
The preview keeps the shadow visible while you change its geometry and color. Its corner-radius control helps compare shapes without adding unrelated declarations to the copied output.
Offset, blur and spread
Horizontal and vertical offsets move the shadow relative to the element. Negative values move it left or upward; positive values move it right or downward.
Blur softens the edge and cannot be negative. Spread changes the shadow footprint: a negative value tightens it and a positive value expands it.
0px 8px 24px 0px, black at 15%box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);One outer shadow with an 8px downward offset, 24px blur and 15% black.
Color and inset
The color picker supplies the shadow color, and opacity controls its alpha value. A low-opacity shadow lets more of the page background show through.
Inset moves the shadow inside the box. The generator produces one shadow; multiple layered shadows require a comma-separated list written in your stylesheet.
Using the CSS
Copy CSS exports only box-shadow:. If you want the same rounded shape as the preview, set border-radius separately on your element.
Text input up to 1 MiB. CSS and HTML transformations run in a worker with a 30-second limit. Color tools use sRGB; generated styles are previews and require testing in your own layout.
Frequently asked questions
Is the preview corner radius included in the CSS?
No. It affects only the preview. Add a separate border-radius declaration when you need the same shape in your interface.
What is the difference between blur and spread?
Blur softens the shadow edge. Spread expands or contracts its footprint before that blur is applied.
Can spread be negative?
Yes. Negative spread makes the shadow smaller; blur must remain zero or positive.
Can I create an inner shadow?
Yes. Enable Inset and the copied declaration will include the inset keyword.
Does this generate multiple shadow layers?
No. It generates one shadow. You can combine the copied value with additional comma-separated shadows in your stylesheet.