How do I use the CSS Box Shadow Generator?

Use the X and Y offset sliders to position the shadow, then adjust blur and spread to control softness and size. Pick a color and opacity, toggle inset if needed, and click Copy CSS to copy the finished declaration to your clipboard.

What CSS properties can I control with this tool?

The generator controls all five box-shadow parameters: horizontal offset (X), vertical offset (Y), blur radius, spread radius, and shadow color including alpha transparency via an RGBA output. You can also toggle the inset keyword.

What does the generated output look like?

The tool outputs a single CSS declaration ready to paste into any stylesheet, for example: box-shadow: 4px 6px 12px 2px rgba(0, 0, 0, 0.25). For inset shadows it prepends the inset keyword. The value is cross-browser compatible and requires no vendor prefixes in modern browsers.

Does the tool upload anything to a server?

No. The CSS Box Shadow Generator runs entirely in your browser. There are no server requests and nothing is uploaded or stored. Your design choices remain completely private.

What is the difference between blur radius and spread radius?

Blur radius controls how soft or sharp the shadow edges are — a value of 0px produces a crisp, hard-edged shadow while higher values feather the edges. Spread radius controls the overall size of the shadow: positive values expand it beyond the element's bounding box, negative values shrink it inward.

Can I create multiple box shadows on one element?

CSS natively supports multiple shadows on a single element by comma-separating declarations, for example: box-shadow: 2px 2px 5px rgba(0,0,0,0.3), inset 1px 1px 3px rgba(255,255,255,0.5). This generator produces one shadow at a time, which you can then manually combine in your stylesheet.

CSS Box Shadow Generator — Free & Live Preview

Free CSS Box Shadow Generator

Quick Answer

What is the CSS box-shadow syntax and what does each value do?

The CSS box-shadow shorthand is: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] [color]. offset-x moves the shadow right (+) or left (−). offset-y moves it down (+) or up (−). blur-radius (default 0) controls softness — higher = softer. spread-radius expands (+) or contracts (−) the shadow size. inset makes the shadow appear inside the element. Example: box-shadow: 2px 4px 12px rgba(0,0,0,0.15) creates a soft outer drop shadow. Layer multiple shadows with commas: box-shadow: shadow1, shadow2.

Create beautiful and layered shadows for your web elements. Visually adjust X and Y offsets, blur radius, spread radius, color, and opacity to generate cross-browser compatible CSS instantly.

Shadow Layers

Offset X4px

Offset Y4px

Blur8px

Spread0px

Opacity25%

Shadow Color

Preview

Gray

CSS Output

box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25);

Tailwind CSS Equivalents

Click any class to copy it to your clipboard. For custom values, use shadow-[0_4px_6px_rgba(0,0,0,0.1)] arbitrary value syntax.

Preset Library

Click any preset to load it into the editor. Presets may use multiple layers — you can edit each layer individually after loading.

Material Design

Neumorphism

Brutalism

Soft UI

Flat

Why most generated shadows look wrong

The default shadow from most generators is symmetrical: box-shadow: 0 4px 6px rgba(0,0,0,0.1). It renders correctly but looks flat and artificial. Real shadows are directional — light comes from above, so shadows fall below and slightly to one side. They also soften as objects rise higher from the surface: a card at 2dp elevation has a tight, dark shadow; a modal at 24dp has a large, diffuse one. Full write-up on shadow realism here.

The two most impactful fixes: (1) Add a small positive Y offset (2–4px for low elevations) to simulate light from above. (2) Use two layered shadows — one tight and dark for the direct shadow, one wide and lighter for ambient light diffusion. Google's Material Design uses exactly this technique for all elevation levels.

Shadow presets by elevation level

Component	Elevation	CSS
Subtle card border	Near 0	0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06)
Button (resting)	Low	0 2px 4px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.08)
Dropdown / popover	Medium	0 4px 12px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.08)
Card (hovering)	Medium-high	0 8px 24px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08)
Modal / dialog	High	0 20px 48px rgba(0,0,0,.18), 0 8px 16px rgba(0,0,0,.10)

These are starting points. Adjust opacity based on your background color: shadows on white need less opacity than shadows on light-grey surfaces. Dark mode requires higher opacity (0.3–0.5) because contrast ratios flip.

When to use colored shadows

Colored shadows work well when the surface casting the shadow has a strong hue — a blue card with a blue-tinted shadow, for example. The trick is to use a muted, desaturated version of the color at low opacity rather than the full saturated value. A button with background: #6366f1 (Indigo-500) reads well with box-shadow: 0 4px 14px rgba(99,102,241,0.4). Using the full saturation without reducing opacity makes the shadow look like a glow effect, not an elevation shadow.

Video demo

☕ Support Us