Back to Tools

Box Shadow Generator

Tailwind Shadows

Create beautiful box shadows visually — get CSS and Tailwind code instantly

🎨
Presets:SubtleMediumLargeSharpFloatingDreamyNeon
Live Preview
Generated Code
CSS
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.25);
Tailwind CSS
shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.25)]
Shadow Layer 1
0px
4px
6px
-1px
#000000
25%
How to Use
  • Adjust the sliders to customize your box shadow in real time.
  • Add multiple shadow layers for more complex effects.
  • Use presets as starting points and customize from there.
  • Toggle "Inset" to create inner shadows.
  • Copy the CSS or Tailwind class directly into your project.