CSS Box Shadow Generator
Adjust offset, blur, spread, color, and inset with sliders, preview the result live, and copy the CSS box-shadow — all in your browser.
Shadow Layers
Layer 1
CSS Output
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
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.
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
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Why use CSS Box Shadow Generator?
- Converts between HEX, RGB, HSL, HSV, and CMYK instantly
- Accessibility contrast checker built in
- Generates harmonious palette variations from a single colour
- Export-ready CSS variables and design tokens
Common use cases
- Pick brand colours that meet WCAG accessibility standards
- Generate a complementary palette from a logo colour
- Convert Figma HEX codes to CSS rgb() for developers
- Create a gradient from two brand colours
- Verify sufficient contrast for text on coloured backgrounds
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.
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.
Color Picker & Converter
Pick a color and instantly convert between HEX, RGB, HSL, HSB, and CMYK. Generate tints, shades, and color palettes.
CSS Gradient Generator
Create beautiful CSS linear, radial, and conic gradients online. Get the CSS code instantly with a live preview.
Color Contrast Checker
Check color contrast ratio for WCAG AA and AAA accessibility compliance. See if your text and background colors meet accessibility standards.
Explore all Color & Design.