CSS Box Shadow Generator
Create CSS box shadows with multiple layers, presets, inset toggle, and live preview. Copy CSS or Tailwind code. Free, no signup, runs in your browser.
box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
layersShadow Layers (1)
stylePresets
collectionsShadow Gallery
50 professionally crafted shadows. Click any to apply it to the generator above.
shopping_bagE-Commerce Cards
forumSocial & Feed
dashboardDashboard & SaaS
webLanding Page
paletteModern & Artistic
About this tool
The CSS Box Shadow Generator lets you visually create box shadows with full control over offset, blur, spread, color, opacity, and inset. Stack multiple shadow layers for complex, professional effects like neumorphism, layered depth, and retro styles.
Use the preset gallery to start with a popular style, then fine-tune each layer independently. The live preview updates instantly as you adjust any parameter. Copy the generated CSS code and paste it directly into your stylesheet.
Frequently Asked Questions
Can I add multiple shadow layers?
Yes. Click 'Add Layer' to stack multiple shadows. Each layer has independent controls for offset, blur, spread, color, and inset. Multiple layers create depth and realism.
What are the preset shadows?
Eight presets: Subtle, Medium, Large, Sharp, Dreamy, Neumorphism, Layered, and Retro. Click any preset to apply it instantly, then customize further.
What is an inset shadow?
An inset shadow appears inside the element instead of outside. Toggle the 'Inset' switch on any layer to create pressed or embedded effects.