CSS Box Shadow Generator: Create Box Shadows Visually

The CSS box-shadow property lets you add depth and visual hierarchy to any element — from subtle card elevations to dramatic modal backdrops. But tweaking shadow values by hand and refreshing the browser is tedious. A visual generator lets you dial in the perfect shadow in seconds.

The 5 Values of box-shadow

The full syntax is: box-shadow: [inset] x-offset y-offset blur spread color;

X Offset

e.g. 4px

Horizontal shadow position. Positive moves the shadow right, negative moves it left. Zero centers it horizontally.

Y Offset

e.g. 4px

Vertical shadow position. Positive moves the shadow down (most common), negative moves it up.

Blur Radius

e.g. 12px

How soft or sharp the shadow edge is. Zero gives a hard, crisp edge. Higher values create a diffuse, soft shadow.

Spread Radius

e.g. 0px

Expands or contracts the shadow size. Positive values make it larger than the element; negative values shrink it.

Color

e.g. rgba(0,0,0,0.2)

The shadow color. Using rgba() lets you control opacity, which is almost always better than a solid color.

Inset Shadows

Adding the inset keyword before the offsets makes the shadow appear inside the element rather than outside. Inset shadows are great for:

• Input fields: A subtle inset shadow gives a pressed/recessed feel to text inputs
• Pressed buttons: Swapping an outset shadow for an inset on :active creates a convincing click effect
• Inner glow: A colored inset shadow at 0 offset and high blur creates an inner glow effect

Multiple Shadows

CSS allows multiple box-shadow values separated by commas. Layering shadows creates more realistic, nuanced depth — the technique used by Google's Material Design elevation system. For example, a card might combine a close, dark shadow for contact shadow and a distant, diffuse shadow for the ambient shadow:

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);

Practical Examples by Component

Card

0 2px 8px rgba(0,0,0,0.12)

Subtle elevation above the page

Button (hover)

0 4px 14px rgba(0,0,0,0.2)

Lifts the button on hover

Modal / Dialog

0 20px 60px rgba(0,0,0,0.5)

Strong shadow to separate from background

Dropdown

0 8px 24px rgba(0,0,0,0.15)

Medium elevation, clearly above content

How to Use the Box Shadow Generator

Adjust the sliders

Move the x-offset, y-offset, blur, and spread sliders. The live preview updates in real time.

Pick a color and opacity

Use the color picker and opacity control to set a shadow color. rgba() values are output automatically.

Toggle inset if needed

Switch between outset (default) and inset shadows with a single click.

Copy the CSS

Copy the generated box-shadow declaration and paste it directly into your stylesheet.

Generate your CSS box shadow now

Live preview · Copy CSS · Inset support · Free · No sign-up

Open CSS Box Shadow Generator →