CSS Box Shadow Generator
Generate CSS box shadows visually with multiple layers, inset shadows, and live preview. Copy clean code with one click.
About CSS Box Shadow Generator
The CSS box-shadow property adds shadow effects to elements. Its syntax takes up to six values: optional inset keyword, X offset, Y offset, blur radius, spread radius, and colour. This generator gives you visual sliders for every parameter with a live preview, so you can design shadows by eye instead of guessing values in code.
What Is the box-shadow Syntax?
The full syntax is:
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
| Parameter | What It Controls | Typical Values |
|---|---|---|
| offset-x | Horizontal position - positive pushes right, negative pushes left | 0 to 20px |
| offset-y | Vertical position - positive pushes down, negative pushes up | 2 to 20px |
| blur-radius | How diffused the shadow is - higher values are softer | 4 to 40px |
| spread-radius | How much the shadow expands or contracts - negative values shrink it | -5 to 10px |
| color | Shadow colour - typically black with low opacity (rgba) | rgba(0,0,0,0.1) to rgba(0,0,0,0.3) |
| inset | Moves the shadow inside the element (pressed/recessed effect) | Keyword present or absent |
Example output:
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
This creates a subtle downward shadow with 4px offset, 16px blur, no spread, and 12% opacity - a common choice for card elevation.
Common Shadow Recipes
| Effect | CSS | Use Case |
|---|---|---|
| Subtle card | 0 2px 8px rgba(0,0,0,0.08) | Light elevation for content cards |
| Soft modern | 0 4px 20px rgba(0,0,0,0.12) | Material Design-style depth |
| Strong depth | 0 8px 30px rgba(0,0,0,0.2) | Modals, popovers, dropdowns |
| Tight sharp | 0 2px 4px rgba(0,0,0,0.15) | Buttons, input focus states |
| Inner shadow | inset 0 2px 6px rgba(0,0,0,0.1) | Input fields, pressed buttons |
| Coloured glow | 0 0 20px rgba(59,130,246,0.5) | Focus rings, neon effects |
| Border simulation | 0 0 0 2px rgba(0,0,0,0.1) | Borders that do not affect layout (spread, no blur) |
Why Use Multiple Shadow Layers?
A single shadow often looks flat. Layering two or three shadows at different blur levels creates more realistic depth, mimicking how light behaves in the real world. The CSS syntax separates layers with commas:
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
The first shadow (small blur) creates a tight edge definition. The second shadow (larger blur) creates the ambient diffusion. This two-layer approach is used in Google's Material Design and most modern design systems. This tool lets you add, configure, and remove layers independently, generating the combined CSS automatically.
Shadow Design Systems
Design systems like Material Design, Tailwind CSS, and Apple's HIG define elevation levels using shadow scales. Here are typical values at each level:
| Elevation | Example Shadow | Use |
|---|---|---|
| Level 0 (flat) | none | Default state |
| Level 1 (raised) | 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) | Cards, sections |
| Level 2 (elevated) | 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06) | Hover states, sticky headers |
| Level 3 (floating) | 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05) | Dropdowns, tooltips |
| Level 4 (overlay) | 0 20px 25px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.04) | Modals, dialogs |
Performance Considerations
Box shadows are rendered by the browser's compositor. A few things to keep in mind:
- Animating box-shadow directly triggers repaints and can be slow. For hover effects, prefer transitioning opacity on a pseudo-element that already has the shadow applied.
- Very large blur values (100px+) on many elements can reduce scroll performance on low-end devices.
- Inset shadows are slightly cheaper to render than outset shadows.
- Using
will-change: transformon the parent can promote the layer to the GPU and improve animation smoothness.
box-shadow vs drop-shadow vs text-shadow
| Property | Applies To | Key Difference |
|---|---|---|
| box-shadow | Element's box (rectangle) | Follows the box shape, supports inset and spread |
| filter: drop-shadow() | Element's alpha channel (including transparent PNGs) | Follows the visible shape, no inset or spread support |
| text-shadow | Text content only | Same syntax as box-shadow minus spread and inset |
Use box-shadow for cards, buttons, and containers. Use drop-shadow for icons, logos, and images with transparency. Use text-shadow for headings and decorative text effects.
Pair your shadows with rounded corners from the CSS Border Radius Generator for polished card designs. For frosted glass effects, try the CSS Glassmorphism Generator.
Everything runs locally in your browser. Your CSS is never sent to any server.
Frequently Asked Questions
Can I add multiple shadow layers?
Yes. Click "Add Shadow Layer" to stack as many shadows as you need. Each layer has its own offset, blur, spread, color, opacity, and inset controls. The generated CSS combines them into a single box-shadow property with comma-separated values.
What does the inset toggle do?
When inset is enabled, the shadow is drawn inside the element instead of outside it. This is useful for creating pressed or recessed effects. The CSS output includes the inset keyword before the shadow values for that layer.
How do I get a soft, modern shadow?
Start with a small Y offset (4-8px), increase blur to 20-40px, keep spread at 0, and lower the opacity to around 10-20%. This creates the soft, elevated look commonly used in modern card designs.
Is this tool free to use?
Yes, completely free. The shadow generation runs entirely in your browser with no server processing. Your CSS is never sent anywhere.
What browsers support box-shadow?
The box-shadow property is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. No vendor prefixes are needed. It has been widely supported since around 2012.
Related Tools
Link to this tool
Copy this HTML to link to this tool from your website or blog.
<a href="https://toolboxkit.io/tools/css-box-shadow-generator/" title="CSS Box Shadow Generator - Free Online Tool">Try CSS Box Shadow Generator on ToolboxKit.io</a>