Open In App

How to Add Shadow to Text using CSS?

Last Updated : 28 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The text-shadow property is used to add shadow to the text. The text-shadow property creates text shadows, specifying horizontal/vertical offsets, blur radius, and color for depth and emphasis.

Note: We can customize text shadow by changing position, blur, and color for improved appearance and visual impact.

Syntax

text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;

Example 1: Adding a shadow to the <h2> text using the text-shadow property, with a horizontal offset of 2px, vertical offset of 3px, and blue color, creating a shadow effect for the text.

HTML
<h1>
	Add shadow to text using CSS
</h1>

<h2 style="text-shadow: 2px 3px blue;">
	GeeksforGeeks a Computer Science Portal.
</h2>

Output

adding-shadow-to-text-by-text-shadow

Basic Text Shadow Example Output

Example 2: Adding a shadow effect by using the text-shadow property. The third value (6px) specifies the blur radius, making the shadow appear softer and more diffused, while rgba controls color and opacity.

HTML
<h1>Below is a text with shadow effect</h1>

<h2 style="text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);">
	Text Shadow with Blur Effect Example
</h2>

Output

output

How to Add Shadow to Text using CSS?



Next Article

Similar Reads