How to use CSS Box Shadow Generator
Generate CSS box-shadow declarations visually — drag sliders for offset-x, offset-y, blur, spread, opacity, and color, toggle inset, and layer multiple shadows to create depth, glows, neumorphism effects, or floating-card elevations. The live preview updates as you adjust every parameter. Copy the finished box-shadow CSS declaration ready to paste into your stylesheet.
- Adjust the Offset X and Offset Y sliders to position the shadow relative to the element.
- Drag the Blur slider to control how soft or sharp the shadow edge is.
- Use the Spread slider to expand or contract the shadow size independently of the element.
- Pick a color and set the opacity percentage for the shadow.
- Toggle Inset to switch between an outer drop shadow and an inner shadow.
- Click "Add Layer" to stack a second shadow — combine multiple layers for neumorphism or complex depth effects.
- Copy the generated CSS and paste it into your stylesheet.
Your data never leaves your device — 100% private processing.
CSS box-shadow syntax explained
The box-shadow property accepts one or more comma-separated shadow declarations. Each shadow takes up to six values: offset-x (horizontal distance — positive pushes right, negative pushes left), offset-y (vertical distance — positive pushes down, negative pushes up), blur-radius (0 = hard edge, higher = softer), spread-radius (expands or contracts the shadow beyond the element bounds), color (typically rgba for transparency), and the optional inset keyword which moves the shadow inside the element's border. Multiple shadows are rendered front-to-back, so the first shadow in the list is closest to the user.
| Parameter | Range | Effect |
|---|---|---|
| offset-x | Any px value | Horizontal shadow position |
| offset-y | Any px value | Vertical shadow position |
| blur-radius | 0px and up | Softness of shadow edge |
| spread-radius | Any px value | Expands (+) or contracts (−) shadow size |
| color | Any CSS color | Shadow color; use rgba for alpha control |
| inset | Keyword | Makes shadow appear inside the element |
Common shadow design patterns
Material Design elevation uses a layered ambient + key shadow approach: a large soft ambient shadow (offset: 0, large blur) and a smaller, offset key shadow together simulate realistic depth. Neumorphism requires two opposite shadows — one light, one dark — on a background that closely matches the element color, producing an extruded or debossed appearance. Glow effects use a zero-offset, large-blur, high-spread shadow in a vivid color (e.g., 0 0 20px 8px rgba(99, 102, 241, 0.6)). For text-like depth, try inset shadows with small blur and spread to simulate stamped or pressed states.
Worked examples
Soft card shadow
Inputs: x0 y4 blur8 spread0 · black 20%
Result: box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)
Colored glow ring
Inputs: x0 y0 blur20 spread8 · indigo 60%
Result: box-shadow: 0 0 20px 8px rgba(99, 102, 241, 0.6)
Glossary
- Inset shadow
- A box-shadow with the inset keyword; renders inside the element border rather than as an outer drop shadow.
- Blur radius
- The third value in a box-shadow declaration — controls the softness of the shadow edge; 0 gives a hard sharp shadow.
- Spread radius
- The fourth value — expands the shadow in all directions (positive) or contracts it (negative) relative to the element size.
- Neumorphism
- A design style using two closely offset shadows (one dark, one light) on a matching-color background to create a soft extruded look.
- Ambient shadow
- A large, low-opacity, zero-offset shadow that simulates environmental light diffusion — used in Material Design elevation.
Related reading
Frequently Asked Questions
Why use CSS Box Shadow Generator?
- Visual sliders for every parameter eliminate trial-and-error CSS editing in browser devtools
- Multi-layer shadow stacking enables neumorphism and Material elevation effects without manual CSS
- Inset toggle switches between outer drop shadow and inner shadow in a single click
- Generates rgba color syntax with precise opacity control for shadows that blend across backgrounds
Common use cases
- Designing a card elevation shadow to match Material Design depth levels 1 through 5 by eye
- Building a neumorphic input field with two opposing inset shadows over a matching background
- Adding a glow ring around a focused button using a zero-offset wide-blur colored shadow layer
- Combining an ambient and key shadow on a modal to simulate realistic depth without heavy software
- Fine-tuning spread and blur on a tooltip drop shadow to achieve crispness without hard edges
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Related Color & Design
CSS Border Radius Generator
Create rounded corners visually and copy the CSS. Control each corner independently for buttons, cards, and blobs. Free and private.
Glassmorphism Generator
Generate frosted-glass (glassmorphism) CSS with backdrop blur, transparency, and border. Live preview and copy. Free and private.
PX ↔ REM Converter
Convert px to rem and rem to px for responsive CSS, with a configurable root font size. Includes a handy reference table. Free and private.
CSS Minifier & Beautifier
Minify and beautify CSS code online. Reduce CSS file size by removing whitespace and comments. Free online CSS minifier with instant results.
Code Beautifier & Formatter
Format and beautify code online with Prettier. Supports JavaScript, TypeScript, JSON, CSS, HTML, Markdown, YAML, and more. Free, private, runs in your browser.
Color Picker & Converter
Pick a color and convert HEX, RGB, HSL, HSB, and CMYK instantly. Generate tints, shades, and export-ready palette values.
Explore all Color & Design.