CSS Box Shadow Generator

The CSS box-shadowproperty adds shadow effects around an element's frame. It is one of the most commonly used CSS properties for adding depth and visual hierarchy to web page elements. You can set multiple effects separated by commas, and each shadow is described by its X and Y offsets relative to the element, blur and spread radii, color, and an optional inset keyword.

Box shadows do not affect layout or the box model. They are purely visual decorations that render outside (or inside, with inset) the element's border edge. Modern browsers have excellent support for box-shadow, making it a reliable choice for production web applications.

The full syntax of the CSS box-shadow property is:

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

• offset-x— Horizontal offset. Positive values place the shadow to the right; negative values place it to the left.
• offset-y— Vertical offset. Positive values push the shadow downward; negative values push it upward.
• blur-radius— The larger the value, the bigger and lighter the shadow becomes. A value of 0 produces a sharp shadow with no blur.
• spread-radius— Positive values cause the shadow to expand; negative values cause it to shrink. A value of 0 keeps the shadow the same size as the element.
• color— The color of the shadow, typically specified with rgba() for transparency control.
• inset— Optional keyword that changes the shadow from an outer shadow to an inner shadow.

CSS allows you to apply multiple shadows to a single element by separating each shadow definition with a comma. This is a powerful technique for creating realistic depth, layered lighting effects, and complex decorative styles without additional HTML elements.

For example, many design systems use two or three layered shadows with increasing offsets and decreasing opacities to simulate natural light fall-off. The first shadow listed is rendered on top, and subsequent shadows render behind it. This generator supports up to four shadow layers, giving you fine control over each layer's offset, blur, spread, color, and opacity.

box-shadow:
  0px 1px 2px rgba(0, 0, 0, 0.1),
  0px 4px 8px rgba(0, 0, 0, 0.06);