Box Shadow Generator

Adjust horizontal offset, vertical offset, blur radius, spread, color, and inset with sliders and see the shadow update instantly. Copy the CSS rule when it looks right.

Adjust offset, blur, spread, and color to build a box-shadow. Copy the CSS when it looks right.

Offset X4px

Offset Y4px

Blur12px

Spread0px

Color

Inset

CSS

box-shadow: 4px 4px 12px 0px #00000040;

How it works

Drag the sliders to control each shadow property: horizontal and vertical offset move the shadow's position, blur softens the edges, and spread expands or contracts it. Pick a color (including alpha for transparency) and toggle inset for inner shadows. The preview box updates live so you see the exact result before copying.

When you'd use this

Adding depth to cards, modals, and dropdown menus. Creating subtle elevation for buttons on hover. Building layered shadow effects for Material Design or neumorphic styles. Inset shadows work well for pressed-button states and inner glow effects.

Box shadow syntax

The CSS box-shadow property takes values in this order: optional inset keyword, horizontal offset, vertical offset, blur radius, spread radius, and color. Positive offsets move the shadow right and down. Negative offsets go left and up. Blur of 0 creates a hard edge. Spread expands the shadow beyond the element's bounds (or shrinks it with negative values).