Skip to content

Help us create more tutorials! Make a donation using the Donate button or become a member using the button below to hide this banner and track your progress.

Box shadow – CSS

Demo

Summary

To add a shadow to an element’s text using CSS, use the box-shadow property:

selector {
  box-shadow: 1px 1px 1px red;
}

Details

The box-shadow property takes up to 5 values.

The first value is the offset-x value. It takes a length value, like px or em. A positive value moves the shadow to the right. A negative value moves it to the left.

The second value is the offset-y value. It takes a length value, like px or em. A positive value moves the shadow down. A negative value moves it up.

The third value is the blur-radius. It takes a length value. A higher value here means a bigger blur. It is an optional value. If you leave it out, the value is set to 0.

The fourth value is the spread-radius. It takes a length value. A positive value makes the shadow grow. A negative value makes it shrink. This value is optional and can be left out.

The last value is the color.

Exercises

First, recreate the CSS code from the Demo section in your CSS file. Then try changing the values for the property.

References

box-shadow – MDN

Back to: CSS Course > CSS Properties