bugl
bugl
HomeLearnPatternsPathsSearch
HomeLearnPatternsPathsSearch

Loading lesson path

Learn/CSS/Advanced Styling
CSS•Advanced Styling

CSS Shadow Effects

Flash cards

Review the key moves

1/4
Core idea

What is the main idea behind CSS Shadow Effects?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___-shadow: 2px 2px;
3Order

Put the learning moves in the order that makes the concept easiest to apply.

Border around text!
Text shadow effect!
CSS Shadow Effects

With CSS you can create shadow effects!

CSS Text Shadow

The CSS text-shadow property applies a shadow to text.

In its simplest use, you only specify the horizontal and the vertical shadow.

In addition, you can add a shadow color and blur effect.

Text shadow effect!

Example

Formatted code
h1 {
  text-shadow: 2px 2px;
}

Live preview

Text shadow effect!

Example

Formatted code
h1 {
  text-shadow: 2px 2px red;
}

Live preview

Then, add a blur effect to the shadow:

Text shadow effect!

Example

Formatted code
h1 {
  text-shadow: 2px 2px 5px red;
}

Live preview

The following example shows a white text with black shadow:

Text shadow effect!

Example

Formatted code
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Live preview

The following example shows a red neon glow shadow:

Text shadow effect!

Example

Formatted code
h1 {
  text-shadow: 0 0 3px #ff0000;
}

Live preview

Multiple Shadows

To add more than one shadow to the text, you can add a comma-separated list of shadows.

The following example shows a red and blue neon glow shadow:

Text shadow effect!

Example

Formatted code
h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

Live preview

The following example shows a white text with black, blue, and darkblue shadow:

Text shadow effect!

Example

Formatted code
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Live preview

You can also use the text-shadow property to create a plain border around some text (without shadows):

Border around text!

Example

Formatted code
h1 {
  color: coral;
  text-shadow: -1px 0 black, 0 1px
  black, 1px 0 black, 0 -1px black;
}

Live preview

Previous

CSS Conic Gradients

Next

CSS Box Shadow