About CSS Box Shadow Generator
The CSS box-shadow property adds shadow effects around
an element's frame. You can set multiple effects separated by
commas. A box shadow is described by X and Y offsets, blur and
spread radii, and color.
Use this tool to visually craft perfect shadows — from subtle depth to dramatic glows — and copy the ready-to-use CSS code in one click.
Horizontal Offset (X)
Positive values push shadow right, negative values push it left. Zero centers the shadow horizontally.
Vertical Offset (Y)
Positive values push shadow down, negative push it up. Used to simulate light direction.
Blur Radius
Higher values produce larger and softer shadows. Zero gives a sharp-edged shadow with no blur.
Spread Radius
Positive values expand the shadow, negative values shrink it. Great for inner glow or tight shadows.
Inset
Converts outer shadow to an inner shadow. The shadow is inside the element's border, useful for pressed/recessed effects.
Multiple Layers
Stack multiple shadow layers to create complex, layered depth. Each layer blends together for rich results.