CSS Text shadow

Prev
Next
css text shadow

CSS Text Shadow

CSS Text Shadow is a way to create shade around the text.

So basically, if you want to create CSS Text with Shadow, then use the text-shadow property of CSS.

It is the same as CSS font shadow.

The syntax of CSS Text shadow:
1)text-shadow:h-offset v-offset blur-radius color;
2)text-shadow:initial;
3)text-shadow:inherit;
4)text-shadow:none;

  • h-offset is the horizontal offset to set up the horizontal shadow of the text.
  • v-offset is the vertical offset to set up the vertical shadow of the text.
  • blur-radius is the amount of blur which makes the text look hazy.
  • color sets a particular color for the shadow of the text.

Example 1 - Using h-offset & v-offset

.text_shadow_offset {
  text-shadow: 2px 1px;
}
Run the Code

We suggest you set a low value of blur radius whenever you use blur-radius in text-shadow so that your text looks good.

CSS Blur Radius

Example 2 - To use Blur Radius

.text_shadow_No_blur_radius {
  text-shadow: 1px 0.8px;
}

.text_shadow_blur_radius {
  text-shadow: 1px 0.8px 5px;
}
Run the Code

Choose a good color for the text-shadow so that it blends well with the idea of the text and web page.

Example 3 - Color

.text_shadow_no_color {
  text-shadow: 1px 0.8px 2px;
}

.text_shadow_color {
  text-shadow: 0px 0px 3px aqua;
}
Run the Code

CSS Multiple Text Shadow

Sometimes, you can also set multiple Text shadows by separating each other using commas(,).

Suppose, you want to add multiple shadows for your text, then define all those shadow properties wisely.

Use this only when it is really required else it can distort the look of your text.

Example 4 - Multiple Text Shadows

.single_text_shadow {
  text-shadow: 0.5px 1.8px 1px Tomato;
}

.multi_text_shadow_2 {
  text-shadow: 0.5px 0.1em 0.5px Tomato, 3px 1px blue;
}

.multi_text_shadow_3 {
  text-shadow: 0.5px 0.1em 0.5px Tomato, 3px 1px blue, 6px 0px 1px yellow;
}
Run the Code

In the same way, we also have CSS Box Shadow to create a shadow along the border of the box. This is discussed in the next article.

Click Here to learn CSS Box Shadow!!!

Prev
Next

Tutorials for all brains!