A box shadow generator lets you create CSS box-shadow effects visually — adjusting offset, blur, spread, and color — without writing CSS from scratch. Shadows add depth, hierarchy, and polish to cards, buttons, modals, and navigation.
Generate CSS Box Shadows Visually
Adjust sliders, layer shadows, and copy CSS. Real-time preview.
Box Shadow Anatomy: The 5 Values
box-shadow: offset-x offset-y blur spread color;
box-shadow: 4px 6px 12px 0px rgba(0, 0, 0, 0.15);| Value | What It Does | Typical Range |
|---|---|---|
| offset-x | Horizontal distance | 0-20px |
| offset-y | Vertical distance | 1-20px |
| blur | Softness of edge | 4-40px |
| spread | Size expansion | -10 to 10px |
| color | Shadow color + opacity | rgba(0,0,0,0.05-0.25) |
The most common mistake is making shadows too dark and too large. Professional UI shadows use rgba(0,0,0,0.05-0.15) — barely visible but creating clear depth. Compare Tailwind CSS shadows: they use 0.05-0.1 opacity.
Layered Shadows for Realistic Depth
Real-world objects cast multiple shadow layers. Using 2-3 layered shadows creates much more realistic depth than a single shadow:
/* Single shadow (flat) */
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
/* Layered shadow (realistic) */
box-shadow:
0 1px 2px rgba(0,0,0,0.06),
0 4px 6px rgba(0,0,0,0.1);
/* Elevated card (Material-like) */
box-shadow:
0 1px 3px rgba(0,0,0,0.12),
0 4px 8px rgba(0,0,0,0.06),
0 12px 24px rgba(0,0,0,0.04);Common Shadow Patterns
| Pattern | CSS | Use For |
|---|---|---|
| Subtle card | 0 1px 3px rgba(0,0,0,0.1) | Cards, panels |
| Medium elevation | 0 4px 12px rgba(0,0,0,0.15) | Dropdowns, popovers |
| High elevation | 0 12px 40px rgba(0,0,0,0.2) | Modals, dialogs |
| Inset | inset 0 2px 4px rgba(0,0,0,0.1) | Input fields, pressed buttons |
| Glow | 0 0 20px rgba(59,130,246,0.4) | Focus rings, highlights |
Shadows in Dark Mode
Standard black shadows are invisible on dark backgrounds. Options:
- Darker shadows — rgba(0,0,0,0.3-0.5) on dark backgrounds
- Border instead — 1px border with rgba(255,255,255,0.1) for subtle separation
- Ambient glow — Use brand color at low opacity: 0 0 20px rgba(59,130,246,0.15)
- Inset highlights — inset 0 1px 0 rgba(255,255,255,0.05) creates a top-edge highlight
Shadow Performance Tips
- box-shadow triggers repaint — animating it is expensive. Use transform + opacity for animations instead.
- filter: drop-shadow() — follows element shape (works on PNGs with transparency). More expensive than box-shadow.
- will-change: transform — hint for GPU acceleration on shadow-heavy elements
- Reduce shadow count on mobile — fewer layers = better performance on low-end devices
Tailwind CSS Shadow Utilities
Tailwind provides pre-defined shadow classes that follow best practices:
| Class | CSS Value | Use For |
|---|---|---|
| shadow-sm | 0 1px 2px rgba(0,0,0,0.05) | Subtle card edges |
| shadow | 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) | Default cards |
| shadow-md | 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06) | Elevated cards, dropdowns |
| shadow-lg | 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05) | Modals, floating elements |
| shadow-xl | 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04) | Large dialogs |
| shadow-2xl | 0 25px 50px rgba(0,0,0,0.25) | Full-screen overlays |
A common pattern: shadow-md hover:shadow-lg transition-shadow — cards lift on hover, providing visual feedback. This is more performant than animating box-shadow directly because Tailwind's transition only triggers on state change.
How to Use the Tool (Step by Step)
- 1
Open the Generator
Navigate to Box Shadow Generator on ToolsArena.
- 2
Adjust Sliders
Set offset-x, offset-y, blur, spread, and color visually.
- 3
Add Layers
Add multiple shadow layers for realistic depth.
- 4
Copy CSS
Copy the generated box-shadow CSS.
Frequently Asked Questions
What is box-shadow in CSS?+−
box-shadow adds shadow effects to elements. Syntax: box-shadow: offset-x offset-y blur spread color. Example: box-shadow: 0 4px 12px rgba(0,0,0,0.15) creates a soft shadow below the element.
How do I make shadows look realistic?+−
Use multiple layered shadows with different blur and opacity values instead of a single shadow. Professional UI uses 2-3 layers with very low opacity (0.05-0.15).
How do shadows work in dark mode?+−
Black shadows are invisible on dark backgrounds. Use darker opacity (0.3-0.5), borders, or brand-colored glows instead.
What is inset shadow?+−
Adding "inset" makes the shadow appear inside the element instead of outside. Used for pressed buttons and input fields: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1).
Do shadows affect performance?+−
Yes. box-shadow triggers repaints. Avoid animating box-shadow directly — animate transform/opacity and use will-change: transform for GPU acceleration.
Is this tool free?+−
Yes. Generate unlimited shadows in your browser. Copy CSS instantly.
Generate CSS Box Shadows Visually
Adjust sliders, layer shadows, and copy CSS. Real-time preview.
Open Box Shadow Generator →Related Guides
CSS Gradient Generator
Generate linear, radial, and conic CSS gradients visually — copy the code and use it instantly in your projects.
CSS Flexbox Generator Guide
Build CSS Flexbox layouts visually. Understand flex-direction, justify-content, align-items, flex-wrap, gap, and responsive patterns with live preview.
Color Palette Generator Guide
Learn color theory, palette types, accessibility contrast rules, and how to generate harmonious color palettes for web design, branding, and UI.