CSS Box Shadow Generator

How to create a CSS shadow

Adjust X and Y offsets, blur, spread, color, and opacity. The preview and box-shadow declaration update in real time.

The box-shadow syntax

X moves the shadow horizontally and Y vertically. Blur softens its edge, spread expands or contracts it, and inset places the shadow inside the element.

box-shadow: X Y blur spread color;

Presets as a starting point

Presets apply editable combinations. Copy the final declaration and adapt it to your interface's background, size, and visual hierarchy.