Free CSS Box-Shadow Generator
Adjust offset, blur, spread, and color — stack multiple shadows and copy the CSS.
CSS
Why professional UI kits stack two shadows, not one
A single shadow reads as flat and slightly artificial because that's not how light actually behaves — a real object casts a tight, dark "contact" shadow right at the point it touches a surface, and a much softer, lighter shadow spreading further out as ambient light fills in the gap. Design systems that aim for a convincing sense of elevation (Material Design's shadow scale is a well-known example) typically stack two shadow layers to mimic exactly that: a small-offset, low-blur, higher-opacity shadow close to the element, plus a larger-offset, higher-blur, lower-opacity shadow further out. This tool's "Add shadow" button builds precisely that comma-separated stack, since box-shadow natively accepts a list of shadows rendered back to front.
One thing worth knowing: a box-shadow never affects an element's layout. It doesn't take up space, doesn't push neighboring elements, and doesn't change the element's measured size — it's purely a visual effect painted outside (or inside, with inset) the element's existing box.
Frequently Asked Questions
What do offset, blur, and spread each do?
Offset X/Y move the shadow left/right and up/down. Blur softens the shadow's edge — higher values fade it out more gradually. Spread grows or shrinks the shadow's size independent of the element itself, before blur is applied.
What does "inset" do?
Inset flips the shadow to the inside of the element, creating a pressed-in or carved look instead of the default shadow that appears to float above the page.
Can I stack multiple shadows on one element?
Yes — box-shadow accepts a comma-separated list, which is exactly what "Add shadow" builds here. Layering a soft, large shadow with a tighter, darker one is a common way to create realistic depth (often called neumorphism when done with two contrasting shadows).
Why does my shadow look different in light vs. dark mode?
A shadow's color and opacity are fixed values, so a shadow tuned for a white background can look too faint (or too harsh) once the surrounding background changes. Preview against the background color your design will actually use before shipping it.
Why do design systems often stack two shadows instead of using one?
A single shadow reads as flat because real shadows aren't uniform — they have a tight, darker contact shadow close to the object and a softer, lighter shadow spreading further out. Stacking a small tight shadow with a larger soft one mimics that more convincingly, which is why "Add shadow" builds a comma-separated list rather than replacing the first shadow.
Does a box-shadow affect an element's size or layout?
No — box-shadow is purely visual. It never takes up layout space, never pushes neighboring elements, and never changes the element's measured width or height, regardless of how large the shadow itself appears.