Open In App

How to Apply Shadow Effect on Text Using CSS?

Last Updated : 19 Nov, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The CSS text-shadow property is used to add a shadow to the text.

Adding a shadow to text using CSS text-shadow

The text-shadow property of CSS is used to apply the shadow effect on text. It takes four values verticalShadow, horizontalShadow, blur, and color.

Syntax

text-shadow: verticalShadow horizontalShadow blur color;

Example 1: A shadow is added to the text using the text-shadow property.

HTML
<h1>Text without shadow</h1>
<h1 style="text-shadow: 5px 5px rgb(82, 78, 78);">Text with Shadow</h1>

Output

text-shadow

text-shadow

Example 2: A blur effects added to the text using the text-shadow property.

HTML
<h1>Text without Shadow</h1>
<h1 style="text-shadow: 7px 7px 4px rgb(143, 135, 135);">
  	Text with shadow and blur effect
</h1>

Output

text-with-blur-and-shadow

text with blur and shadow



Similar Reads