CSS Box Shadow Generator

Adjust the sliders to preview your shadow in real-time. Use the new Presets buttons for instant Material, Neon, or Glassmorphism effects. Export standard CSS, Variables, or Tailwind classes.
Preview

Mastering CSS Box Shadows

The box-shadow property allows you to attach one or more shadows to an element. This is essential for creating depth, hierarchy, and emphasis in modern web interfaces (like Material Design and Glassmorphism).



Frequently Asked Questions

What are the parameters for box-shadow?
The standard syntax is: offset-x | offset-y | blur-radius | spread-radius | color. You can also add the inset keyword at the beginning to draw the shadow inside the box.
How does Tailwind handle custom shadows?
In Tailwind CSS, you can use arbitrary values by placing the exact shadow parameters inside square brackets, like this: shadow-[0px_20px_40px_rgba(0,0,0,0.25)]. Our tool generates this syntax automatically when the Tailwind export option is selected.