📖 What is Box Shadow Generator?
Box Shadow Generator creates CSS box-shadow values with a visual interface. Adjust horizontal and vertical offset, blur radius, spread radius, color and opacity with live preview. Supports multiple shadows, inset shadows and color with alpha transparency. Copy the generated CSS with one click. Everything runs in your browser.
💡 Example
Input
Offset: 4px 4px, Blur: 12px, Spread: 0, Color: rgba(0,0,0,0.15)
Output
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.15);
🛠️ Common Use Cases
- Creating elevation shadows for cards and modals
- Building neumorphic (soft UI) shadow effects
- Adding depth to buttons, dropdowns and popovers
- Designing inset shadows for pressed button states
- Generating consistent shadow values for design systems
📝 Box Shadow Syntax
box-shadow: offsetX offsetY blur spread colorbox-shadow: 0 4px 8px rgba(0,0,0,0.1) — subtle elevationbox-shadow: inset 0 2px 4px rgba(0,0,0,0.1) — inner shadow- Multiple shadows: separate with commas
- Use
rgba() for semi-transparent shadows
⚠️ Common Mistakes
- Too many shadows — multiple large box-shadows impact rendering performance, especially on scroll
- Opaque shadow colors — use rgba() with low alpha (0.1-0.3) for natural-looking shadows
- Forgetting inset keyword — without "inset," the shadow is outside. With it, the shadow is inside the element.
❓ Frequently Asked Questions
How do I create an inset shadow? ▾
Add the inset keyword: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1). Inset shadows appear inside the element.
Can I add multiple shadows? ▾
Yes — separate them with commas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05).
What is the difference between blur and spread? ▾
Blur controls the shadow softness (larger = softer). Spread controls the shadow size (positive = larger, negative = smaller than element).
Is my data private? ▾
Yes — all processing runs entirely in your browser. Your data is never sent to any server.
Is this tool free? ▾
Completely free — no login, no usage limits, works offline once loaded.
Yes — completely free, no login required, no usage limits.
Is my data private? ▾
Yes — all processing runs in your browser. Your data is never sent to any server.
Does it work offline? ▾
Yes — once the page is loaded, the tool works without an internet connection.