Skip to main content
Utulio
Developer Tools

CSS Box Shadow Generator

Visually create CSS box shadows with sliders for offset, blur, spread, color, and opacity. Add multiple layered shadows and copy the ready-to-use CSS code.

Horizontal Offset5px
Vertical Offset5px
Blur Radius10px
Spread Radius0px
Opacity: 30%
CSS Output
box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.30);

CSS Box Shadow Syntax

The full box-shadow syntax is: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. All length values are in pixels. Multiple shadows are comma-separated and rendered back-to-front (first value is on top).

For realistic depth, professional designs often stack multiple subtle shadows at different sizes. A common pattern uses a tight shadow for definition and a soft, diffuse shadow for depth. This creates the material design "elevation" effect used by Google and many modern UI libraries.

This generator uses rgba() format for colors, which is the best practice for shadows as it allows transparent colors that blend naturally over any background.

Box Shadow FAQs

What is box-shadow in CSS?
The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple shadows using comma-separated values. Each shadow is defined by: horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword.
What do the box-shadow parameters mean?
Horizontal offset: positive moves shadow right, negative moves left. Vertical offset: positive moves shadow down, negative moves up. Blur radius: 0 = sharp edges, larger values = more blurred. Spread radius: positive expands the shadow, negative contracts it. Color: typically rgba() for transparency control.
What is an inset shadow?
Adding the "inset" keyword makes the shadow appear inside the element rather than outside. Inset shadows are useful for creating pressed/sunken button effects, inner glows, or inner border effects. You can combine inset and outset shadows on the same element.
How do I add multiple shadows?
Multiple box-shadow layers are separated by commas in the CSS: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05). This generator supports multiple layers — use the "Add layer" button to add additional shadows. Each layer is controlled independently.
How do I use rgba() for shadow colors?
rgba(r, g, b, a) lets you specify a color with transparency. The alpha (a) value ranges from 0 (fully transparent) to 1 (fully opaque). For shadows, a low alpha value (0.1–0.3) creates subtle, realistic shadows. This generator converts your hex color and opacity setting to the correct rgba() format automatically.
What are some popular shadow styles?
Subtle elevation: 0 1px 3px rgba(0,0,0,0.12). Card shadow: 0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.1). Floating button: 0 10px 25px rgba(0,0,0,0.2). Hard/retro shadow: 4px 4px 0px #000000. Inner glow: inset 0 2px 4px rgba(0,0,0,0.15).

Related Tools

developer

JSON Formatter & Validator

Format, validate, and minify JSON instantly. Private — runs entirely in your browser.

Open tool →
developer

Regex Tester

Test regular expressions in real-time with live match highlighting and capture group display.

Open tool →
developer

Base64 Encoder / Decoder

Encode text to Base64 or decode Base64 to text. UTF-8 safe, private, instant.

Open tool →