CSS Box-Shadow Generator

How it works

The color and opacity are combined into an rgba() value, then joined with your offset, blur and spread into a single box-shadow value. Enabling Inset prepends the inset keyword, which makes the shadow appear inside the element's border instead of projecting outward from behind it.

Spread grows or shrinks the shadow's shape uniformly in every direction before any softening happens; blur only softens the edge of whatever shape is left. A large spread with zero blur gives a hard-edged, larger-than-the-element silhouette, while blur alone just fades the original edge.

A live preview matters more here than for most CSS generators — six numbers and a color rarely add up to a mental picture, so seeing the actual shadow on a real box is the fastest way to tell whether it looks right.