Skip to content

Box Shadow Generator

box shadow is described by X and Y offsets relative to the element blur and spread radius and color.

10px 10px 20px 0px rgba(0, 0, 0, 0.5)

What is CSS Box Shadow Generator?

The CSS box-shadow property adds a shadow behind an element. Shadows give a page depth and make cards, buttons and menus appear to lift off the background.

What this tool does

Lets you set the horizontal and vertical offset, blur, spread, color and opacity of a shadow, shows a live preview and gives you the CSS to copy.

How to use it

  1. Move the sliders for offset, blur and spread.
  2. Pick a color and an opacity.
  3. Copy the generated CSS.

Did you know?

  • You can stack several shadows on one element by separating them with commas.
  • Adding the inset keyword draws the shadow inside the element instead of outside.
  • A box shadow does not change the size of an element or push other elements around.

More tools in this category