CSS Generator

Box Shadow CSS Generator

To add a shadow to an image, try the drop-shadow() filter function, which conforms to the image’s shape (alpha channel).

To add a shadow to text, try the text-shadow property.

Options

5 px
5 px
10 px
1 px

Preview

Code

About box shadows

The box-shadow CSS property adds a shadow around an element’s entire box. Multiple shadows can be set by separating each effect by commas. A box shadow is described by X and Y offsets, blur, spread radius and color.

If a border-radius is specified on the element, the box shadow takes on the rounded corners.

box-shadow property

box-shadow: x-offset y-offset blur-radius spread-radius color | inset

x-offset

Horizontal offset relative to the element. Positive numbers move the shadow to the right. Negative numbers move it to the left. If 0, the shadow’s horizontal is placed behind the element.

y-offset

Vertical offset relative to the element. Positive numbers move the shadow down. Negative numbers move it up. If 0, the shadow’s vertical position is placed behind the element.

blur-radius

Blur radius. The bigger the value, the bigger and lighter the blur. Negative values are not allowed. If 0, the shadow will have a sharp edge.

spread-radius

Spread radius. Positive values will cause the shadow to grow bigger. Negative values will cause the shadow to shrink.

color

Color value of the shadow.

Comments

Please leave your comments, feedback and suggestions below. 😊