Box and Text Shadow

This page lists the CSS properties related to shadows.

CSS Properties

box-shadow

Sets the box shadow.

Specify x-offset, y-offset, blur radius (optional), spread radius (grows/shrink the shadow, optional), and color. If you include the inset keyword, the shadow will be drawned inside the element.

<div id="box-shadow-example">
  Lorem ipsum dolor sit amet
</div>

#box-shadow-example {
  border: 1px solid black;
  box-shadow: 1px 1px 5px red;
}

text-shadow

Sets the text shadow.

Specify x-offset, y-offset, blur radius (optional), and color.

<div id="text-shadow-example">
  Lorem ipsum dolor sit amet
</div>

#text-shadow-example {
  text-shadow: 1px 1px red;
}

References

• box-shadow (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
• text-shadow (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow