Skip to main content

CSS Shadows

A shadow can be added to an element using the box-shadow property. The box-shadow property allows you to add a shadow to the outside of an element's border box.

The basic syntax for the box-shadow property is:

box-shadow: h-shadow v-shadow blur spread color;

where:

  • h-shadow is the horizontal offset of the shadow (can be negative).
  • v-shadow is the vertical offset of the shadow (can be negative).
  • blur is the blur radius of the shadow (optional).
  • spread is the size of the shadow (optional).
  • color is the color of the shadow.

As an example:

Editor

Loading...

In this example:

  • The class .box have shadow of 2 pixels to the right and 2 pixels down from the element, with a blur radius of 5 pixels and a color of rgba(0, 0, 0, 0.3) (which is a semi-transparent black).

You can also create more complex shadows with multiple shadows or inset shadows.

As an example:

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -2px -2px 5px rgba(255, 255, 255, 0.3),
  inset 0px 0px 10px rgba(0, 0, 0, 0.3);
  • This will create three shadows: a regular shadow on the top right and bottom left of the element, a regular shadow on the top left and bottom right of the element, and an inset shadow around the edge of the element.

CSS Text Shadow​

A shadow can also be added to the text using the text-shadow property. The text-shadow property allows you to add a shadow to the text of an element.

The basic syntax for the text-shadow property is:

text-shadow: h-shadow v-shadow blur color;

where:

  • h-shadow is the horizontal offset of the shadow (can be negative).
  • v-shadow is the vertical offset of the shadow (can be negative).
  • blur is the blur radius of the shadow (optional).
  • color is the color of the shadow.

As an example:

Editor

Loading...

In this example:

  • The class .text-shadow have shadow of 2 pixels to the right and 2 pixels down from the text, with a blur radius of 5 pixels and a color of rgba(0, 0, 0, 0.3) (which is a semi-transparent black).

You can also create more complex shadows with multiple shadows.

As an example:

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -2px -2px 5px rgba(255, 255, 255, 0.3);
  • This will create two shadows: a regular shadow on the top right and bottom left of the text and a regular shadow on the top left and bottom right of the text.