CSS Box Shadow Generator — Free Online Tool

How to Use the CSS Box Shadow Generator

1. Use the sliders to adjust horizontal offset, vertical offset, blur radius, spread radius, and opacity.
2. Pick a shadow color with the color picker.
3. Add multiple shadow layers by clicking "Add Layer" for complex stacked shadow effects.
4. Copy the output as CSS, React inline style, or Tailwind class syntax.

Why Use a Box Shadow Generator

CSS box shadows have five parameters (X offset, Y offset, blur, spread, color) and can be stacked in multiple layers — making the syntax error-prone to write by hand. A visual generator lets you see the shadow update in real time as you drag sliders, making it easy to get the exact depth and softness you want without trial-and-error in your editor.

The presets included cover the most common design patterns: flat cards, raised buttons, floating modals, neumorphic surfaces, and more. The React and Tailwind output modes save time if your project uses those frameworks — no need to manually convert between CSS and JavaScript object syntax.

Frequently Asked Questions

• What is the difference between blur and spread?
  Blur softens the shadow edges — higher blur means a softer, more diffuse shadow. Spread expands or contracts the shadow size before blurring — positive spread makes the shadow larger than the element.
• Can I create an inset shadow?
  Yes. Toggle the "inset" option to make the shadow appear inside the element instead of outside — useful for pressed/recessed button effects.
• How do I add text shadow?
  Switch to the Text Shadow tab. Text shadow uses only X offset, Y offset, blur, and color — there is no spread parameter for text shadows.