How to Add Shadow Effect on Text HTML Using CSS

Last Updated on January 28, 2021 by Roshan Parihar

In this tutorial, learn how to add shadow effect on text HTML using CSS. The short answer is: use text-shadow CSS property to apply shadow to the HTML text content. Create different shadow effects with the effect types given here with examples.

You can easily create attractive shadow effects like simple shadow, blur shadow, multiple shadow, outline shadow, and many others to add to your text content. These all effects are the same shadow effect as you create in photoshop.

Let’s create them with the examples given below:

How to Add Shadow Effect on Text HTML With Shadow Color

To create a simple shadow effect, you have to simply add pixel size and color. The added color in the text-shadow property displays the shadow of the text. You may also like to read how to add a shadow effect to the div element using CSS.

Output

Simple text shadow with shadow color.

The above example showing the simple shadow with red color. However, you can change the color and the pixel size as per your requirement. Add your own color which fits best to your text color.

Show and Add Shadow Effect on Text HTML With White Text Color

If you want to add more effect to the simple shadow, you can add a white color to the text. The white color displays the white text and highlights more the shadow.

Output

White text with shadow color.

The above example contains the white text and the red color shadow. Change the shadow color to add a different shadow look to the text content.

Add Blurred Shadow Effect on Text

Add a blurry shadow effect to the HTML text with white in color. A blurred shadow appears as a blur with the blurry edges. The shadow split into different shades and the result is a blurred shadow with text.

Output

White Text with Blur Shadow Effect.

The above example contains the blurred shadow and the white-colored text. Increase or decrease the third-pixel value of box-shadow property to add a more blurry effect to the content. Add shadow effect on text HTML with blur shadow effect.

Display Blurred Shadow Effect With Transparent Color

If you want to display only the shadow and not the text content. You have to first make the text content transparent. This will hide the text content and display only the shadow. It depends on you whether you want to make the shadow simple or blurry for an extra shadow effect.

Output

Transparent text with blur shadow effect.

The above example contains the white transparent text to highlight shadow more. The blurred shadow displays shadow text with a blur effect.

Far Away Shadow Effect For Display at Some Distance

In addition to the above-given shadow effects, you can add shadow to some distance also. Apply a shadow effect to the text and display shadow far away from the text content. This is another way of displaying the shadow effect.

You can increase pixel size to take the shadow near or far away from the text.

Output

Text with faraway shadow effect.

Add more distance to the shadow effect by increasing the pixel size of the box-shadow property.

Add Multiple Shadow Effect

With the simple shadow effect, you can add multiple shadows to the text. Add multiple values with the color to the text-shadow CSS property. See the example below to add multiple shadow effect to the text.

Output

Text with multiple shadow effect.

The above example contains the text with the multiple shadow effect. You can add more multiple shadow effect to the text content as per your requirement.

Add Outline Shadow Effect on HTML Text

You can create an outline effect on the text content. Add 4 shadow effect to the text content to add an outline shadow effect to the text content. However, this is another type of multiple shadow effect. You have added 4 shadows to the text content for this.

Output

Text with outline shadow effect.

The above example creates a plain border around each word of text content. The outline effect can be useful when you want to add 3D text HTML content.

• Define CSS for Internet Explorer and add IE-only stylesheet
• How to change background transparency of div element

I hope you like this post on how to add shadow effects to text HTML using CSS.