How to create a CSS shadow
- Start from a preset, or adjust the sliders of the first layer: horizontal and vertical offset, blur, spread, color and opacity.
- Add more layers for realistic depth. Stacked shadows with increasing blur look much more natural than one big shadow.
- Change the background and box colors to match your design and see the shadow in context.
- Copy the CSS and paste it into your stylesheet.
What each value does
The CSS shadow syntax is offset-x offset-y blur spread color. Positive offsets move the shadow right and down, as if light comes from the top left. Blur softens the edge; spread grows or shrinks the shadow before blurring, and a negative spread with a large blur gives the soft, lifted look used in modern interfaces. Inset puts the shadow inside the element, for pressed buttons and input fields.
Shadows in real life are rarely pure black. Use a dark, slightly transparent version of your background or brand hue (around 8–20% opacity) for subtle elevation. Large blurred shadows cost a little rendering time, so avoid animating them on many elements at once.
The generator runs entirely in your browser and remembers your last design.
How do I add multiple shadows in CSS?
Separate them with commas in one box-shadow declaration. The first shadow is drawn on top.
What is neumorphism?
A soft UI style using a light shadow on one side and a dark one on the other, on an element the same color as its background. Use it sparingly, as contrast is low.
Can I put a shadow on a transparent PNG?
box-shadow follows the element's box. For the outline of an image, use filter: drop-shadow(...) instead.