CSS Box Shadow Generator

What is a Box Shadow?

The box-shadow CSS 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 relative to the element, blur and spread radii, and color.

Shadows are incredibly useful in modern UI design for creating depth, establishing visual hierarchy, and making "floating" elements like modal dialogues, dropdown menus, and sticky headers stand out from the background.

CSS Syntax Explained

The standard syntax for a box shadow looks like this:

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

• inset (Optional): Changes the shadow from an outer shadow (outset) to an inner shadow.
• offset-x: Specifies the horizontal distance. Negative values place the shadow to the left of the element.
• offset-y: Specifies the vertical distance. Negative values place the shadow above the element.
• blur-radius (Optional): The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed.
• spread-radius (Optional): Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink.
• color: Sets the color of the shadow. For smooth shadows, use rgba() to add transparency.