Text decoration and shadow

Add effects to text with text-decoration and text-shadow.

Text decoration

To draw a line under, over or through text, use the text-decoration property. Common values: underline, overline, line-through and none.

To remove the default underline of links, write text-decoration: none;. Color and style can be added: text-decoration: underline red wavy; draws a wavy red underline.

Text shadow

To add a shadow to text, use the text-shadow property. The value has four parts: horizontal offset, vertical offset, blur radius and color.

For example, text-shadow: 2px 2px 4px rgba(0,0,0,0.5); gives the text a semi-transparent black shadow shifted 2 pixels right and down, with a 4 pixel blur.

A blur of 0 gives a sharp-edged shadow; larger values spread more softly.

Exercise Add decoration and shadow to the heading

Open a block for the h1 selector. Add these two declarations inside: text-decoration: underline; and text-shadow: 2px 2px 4px rgba(0,0,0,0.5);.

Show example solution

h1 {
  text-decoration: underline;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

Test yourself

Which value removes a link's underline?
- text-decoration: none;
- text-decoration: underline;
- text-decoration: overline;
- text-decoration: line-through;
Show answer

text-decoration: none; — Correct. text-decoration: none; removes all line effects.

Underline the heading

h2 {
  text-decoration: ____;
}

Show answer

h2 {
  text-decoration: underline;
}

Match each text-shadow part to its meaning

First number

Horizontal offset
Second number

Vertical offset
Third number

Blur radius
Last value

Shadow color
Which text-shadow value gives the softest shadow?
- text-shadow: 2px 2px 0px gray;
- text-shadow: 2px 2px 1px gray;
- text-shadow: 2px 2px 2px gray;
- text-shadow: 2px 2px 8px gray;
Show answer

text-shadow: 2px 2px 8px gray; — Correct. A blur radius of 8 pixels gives the widest spread; the shadow is softest.

Next lesson: Summary - Article typography

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies