CSS Box Shadow Generator
Build single or layered box shadows with live preview. Adjust offset, blur, spread, color and opacity — then copy the CSS in one click.
Preview area background
Generated CSS
CSS box-shadow syntax
Full syntax: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
Values explained:
- offset-x — horizontal distance. Positive moves the shadow right; negative moves it left.
- offset-y — vertical distance. Positive moves the shadow down; negative moves it up.
- blur-radius — higher value = softer, more diffused shadow (default 0 = hard edge).
- spread-radius — positive expands the shadow; negative shrinks it.
- color — any valid CSS color. Use
rgba()for transparency. - inset — optional keyword that makes the shadow appear inside the element instead of outside.
Multiple shadows: Separate each shadow definition with a comma. The first shadow in the list is rendered on top.
Example: box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
Browser support: box-shadow is supported in all modern browsers (Chrome, Firefox, Safari, Edge) without any prefix. It has been supported since IE9.