CSS text-shadow Property

You are Here:

CSS text-shadow Property

CSS text-shadow property adds shadows to text.

This property accepts a comma-separated list of shadows to be applied to the text and any of its decorations.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> p{ text-shadow: 2px 1px 3px green; font-size: 25px; } </style> </head> <body> <h1>CSS direction Property</h1> <p>This is a sentence.</p> </body> </html>

Syntax

Using CSS

element{ // text-shadow: h-shadow v-shadow blur-radius color; text-shadow: 2px 1px 5px green; }

Using Javascript

object.style.textShadow="2px 1px 5px green";

Animatable

Yes, text-shadow property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS text-shadow property is none.

Property Value

The following table provides a list of values for CSS text-shadow property.

ValueExplanation
h-shadowSpecifies the position of the horizontal shadow.
v-shadowSpecifies the position of the vertical shadow.
blur-radiusSpecifies the blur radius. Default value is 0.
colorSpecifies the color of the text shadow.
noneSpecifies no shadow to text.

Demonstrating Individually

In the following example, we will demonstrate h-shadow, v-shadow, and blur-radius individually.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> h2+p{ font-size: 35px; } #h{ text-shadow: 20px 0px 0px green; } #v{ text-shadow: 20px 10px 0px green; } #b{ text-shadow: 20px 10px 5px green; } </style> </head> <body> <h1>CSS direction Property</h1> <h2>h-shadow</h2> <p id="h">T</p> <h2>v-shadow</h2> <p id="v">T</p> <h2>blur-radius</h2> <p id="b">T</p> </body> </html>

Using JavaScript

In the following example, we will demonstrate how to change the CSS text-shadow property of an element using JavaScript.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS text-shadow Property</h1> <p style="font-size: 35px;">John Doe</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("p")[0]; function myFunction(){ x.style.textShadow = "3px 3px 3px green"; } </script> </body> </html>

Reminder

Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in CSS.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author