box-shadow

The box-shadow property adds one or more shadows to an element.

Syntax

Example:

div.ex {
  box-shadow: 3px 30px #e1e1e1;
}

none
Default value. No shadow.

h-offset
(Required) Sets the positive (right) or negative (left) horizontal offset of the shadow.

v-offset
(Required) Sets the positive (right) or negative (left) vertical offset of the shadow.

blur
(Optional) Sets the blur radius, where the higher the value the more blurred the shadow.

spread
(Optional) Sets the spread radius, where the higher the value the larger the shadow.

color
(Optional) Sets the color of the shadow using CSS color values. Default color is the text color.

inset
(Optional) Makes the shadow an inner shadow instead of an outer shadow.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

User-submitted codepen.io examples of box-shadow ↴

See the Pen on CodePen.

See the Pen on CodePen.

Submit a codepen.io link that demonstrates box-shadow:

to submit a demo.