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 effect with the effect types given in the examples.

The shadow effect if the attractive effect you can add to a text element. Add simple shadow, blur shadow, multiple shadow and outline shadow to your text content. This is the same shadow effect as you create in the photoshop.

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 the color. The added color in the text-shadow property display as the shadow of the text. You may also like to read how to add shadow effect to 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 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 white color to 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 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 blur shadow appears as 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 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 blurr shadow display shadow text with blurr effect.

Far Away Shadow Effect For Display at Some Distance

In addition to 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 shadow effect.

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

Output

Text with far away 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 shadow 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 to the text content. Add 4 shadow effect to the text content to add outline shadow effect to the text content. However, this is another type of multiple shadow effect. You have add 4 shadows to the text content for this.

Output

Text with outline shadow effect.

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

Hope, you like this tutorial. If you have any query regarding how to add shadow effect on text HTML using CSS. Please comment below to discuss.

Also tell me, what are different shadow effects are you using for your website?.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.