Free CSS Box-Shadow Generator
Adjust offset, blur, spread, and color — stack multiple shadows and copy the CSS.
CSS
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.