Box Shadow Generator
.box {
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
}CSS Box Shadow Generator
Create beautiful, layered shadows for your web elements. Customize offsets, blur, spread, and color with live preview.
Why Use Our Generator?
Full Control
Adjust X/Y offsets, blur radius, spread, and opacity with precision
Inset Shadows
Toggle between outer drop shadows and inner inset shadows
Custom Colors
Choose any shadow color and adjust transparency (alpha channel)
Instant CSS
Get the exact CSS code ready to paste into your stylesheet
Real-time Preview
See changes immediately on a sample element
Cross-Browser
Generates standard CSS3 code compatible with all modern browsers
How It Works
Set Offsets
Use Horizontal and Vertical sliders to position the shadow relative to the element.
Adjust Blur & Spread
Increase Blur for softer shadows. Use Spread to resize the shadow shape.
Copy Code
Copy the generated CSS snippet and add it to your website's stylesheet.
Perfect For
Adding depth and dimension to your designs
🔲 Cards
Add elevation to content cards to make them pop off the page
🔘 Buttons
Create clickable-looking buttons with drop shadows
🖼️ Images
Give photos a frame-like effect or lift them from the background
✨ Neumorphism
Create soft, extruded plastic-looking UI elements
🔦 Glow Effects
Use colored shadows with high blur to create glowing elements
📥 Inputs
Use inset shadows to create depth for text fields and inputs
Common problems this tool solves
How to Add Glow Effects with Box Shadow
Create neon lights and glowing UI elements. Use colored box-shadows to make specific parts of your site shine and stand out.
How to Create Inner Shadows in CSS
Learn the 'inset' box-shadow trick. Create pressed-in effects and recessed UI elements for unique, tactile designs.
How to Create Realistic Box Shadows in CSS
Move beyond basic shadows. Learn how to use layered box-shadows to create professional depth and realistic lighting for UI elements.