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.