About the Box Shadow Generator
The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas, each with offset-x, offset-y, blur-radius, spread-radius, and color values.
CSS Box Shadow Syntax
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
- offset-x / offset-y: Position of the shadow. Positive values move it right/down, negative left/up.
- blur-radius: The larger the value, the bigger the blur. 0 produces a sharp edge.
- spread-radius: Positive values expand the shadow, negative shrink it.
- color: Any CSS color value. Use rgba() for transparency.
- inset: Makes the shadow render inside the element.
Popular Shadow Styles
- Soft/Material: Large blur, low opacity, slight negative spread for a floating card look.
- Hard: Zero blur creates a retro solid-shadow effect.
- Neon glow: 0 offset with colored shadow and high spread.
- Layered: Multiple shadows at increasing blur create realistic depth.
Use presets to quickly get started, then fine-tune with sliders for the perfect look.