Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

Text shadow – CSS

Demo

Summary

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

selector {
  text-shadow: 1px 1px 1px green;
}

Details

The text-shadow property takes 4 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 last value is the color.

Exercises

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

Reference

text-shadow – MDN

Back to: CSS Reference > CSS Properties