Box Shadow Generator
Design a CSS box shadow with live preview and copy the code.
How to use this box shadow generator
Drag the numeric fields to change the shadow's horizontal offset (X), vertical offset (Y), blur radius and spread. Pick a color and control how strong it looks with the opacity slider. The preview box updates live so you can judge the effect before copying anything.
When you are happy with the result, copy the CSS from the code box and paste it into your stylesheet. The output uses modern rgba() color syntax so it works in every browser.
Shadows create depth and hierarchy in UI design. A soft, large-blur shadow with low opacity usually looks more natural than a hard dark one — try the "soft look" option to generate a layered shadow that mimics real light falloff.
FAQ
What do X and Y offsets mean?
X moves the shadow left (negative) or right (positive); Y moves it up (negative) or down (positive). Most natural-looking shadows have Y slightly larger than X, as if light comes from above.
Does box-shadow affect performance?
Large blur values on many elements can cost rendering time. For lists, prefer one consistent shadow class instead of unique shadows per item, and avoid animating box-shadow directly — animate opacity of a shadow layer instead.
Do shadows work on all browsers?
Yes. The CSS box-shadow property is supported everywhere, including all mobile browsers. The generated code needs no vendor prefixes.