CSS Box Shadow Generator
Drag the sliders, watch the preview, copy the CSS — plus one-click presets for popular styles.
Shadows that look natural
Real-world shadows are soft, close to the object, and slightly transparent. A good recipe: a small offset down (light comes from above), a generous blur, a slightly negative spread to keep the shadow tucked under the edges, and 10–20% opacity of a dark desaturated color rather than pure black. Hard zero-blur shadows read as retro or brutalist — a deliberate style, not a default.
Frequently asked questions
Why does the generator use rgba instead of a hex color?
Opacity is what makes shadows look real. Encoding it inside rgba() keeps the shadow color and its transparency together in one value, which is easier to tweak than a separate opacity property (that would fade the element itself).
How do I put a shadow on only one side?
Use a negative spread with a matching negative offset — for a bottom-only shadow try offset Y positive, spread around −(blur/2). The sliders above can build exactly this.