CSS Box Shadow Generator
Visual CSS box-shadow generator with multi-layer support, Tailwind and real-time preview.
Preview
CSS Code
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
0px 4px 6px -2px rgba(0, 0, 0, 0.05);Tailwind: shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-2px_rgba(0,0,0,0.05)]
Shadows List
About This Tool
A comprehensive CSS shadow design tool helping developers create layered UI effects with ease. It allows you to stack unlimited shadow layers on a single element. Fine-tune each layer's X/Y offset, blur radius, spread radius, and color opacity, or toggle Inset mode. Customize box size and border radius for realistic previews. Generates both standard CSS and Tailwind CSS arbitrary value syntax for seamless project integration.
Features
- 📚 Multi-layer: Stack unlimited shadow layers for rich 3D effects
- 🎛️ Fine Control: Adjust X/Y offset, blur, spread, and inset mode independently
- 📦 Tailwind Ready: Generates Tailwind CSS arbitrary value syntax
- 📐 Box Controls: Customize preview box width, height, and border radius
- ✨ Presets: Built-in styles including Soft, Hard, Neon, and Layered
- 💻 Code Gen: Auto-generates standard CSS box-shadow and Tailwind code