CSS Text-shadow

As its name implies, this CSS property adds shadows to the text. It accepts the comma-separated list of shadows that applied to the text. It's default property is none. It applies one or more than one text-shadow effect on the element's text content.

Let's see the syntax of text-shadow property.

Syntax

Values

h-shadow: It is the required value. It specifies the position of the horizontal shadow and allows negative values.

v-shadow: It is also the required value that specifies the position of the vertical shadow. It does not allow negative values.

blur-radius: It is the blur-radius, which is an optional value. Its default value is 0.

color: It is the color of the shadow and also an optional value.

none: It is the default value, which means no shadow.

initial: It is used to set the property to its default value.

inherit: It simply inherits the property from its parent element.

Let's understand it by using some illustrations.

Example- Simple shadow

<!DOCTYPE html> 
  
<html> 
<head> 
    <title> font-weight property </title> 
    <style> 
      p.simple{
        text-shadow: 3px 3px red;
      }
    </style> 
</head> 
  
<body> 
    <p class="simple"> 
      Simple Shadow
    </p> 
 
</body> 
</html>

Test it Now

Example- Fuzzy shadow

<!DOCTYPE html> 
  
<html> 
<head> 
    <title> font-weight property </title> 
    <style> 
      p.fuzzy{
        text-shadow: 3px 3px 3px violet;
        font-size:30px;
        text-align:center;
      }
    </style> 
</head> 
  
<body> 
    <p class="fuzzy"> 
    Fuzzy Shadow
    </p> 
 
</body> 
</html>

Test it Now

Example- Multiple Shadows

<!DOCTYPE html> 
  
<html> 
<head> 
    <title> font-weight property </title> 
    <style> 
      p.multi{
        text-shadow: -3px -3px 3px blue, 3px 3px 3px red;
        font-size:30px;
        text-align:center;
      }
    </style> 
</head> 
  
<body> 
    <p class="multi"> 
    Multiple Shadows
    </p> 
 
</body> 
</html>

Test it Now

Example- Glow Effect

<!DOCTYPE html> 
  
<html> 
<head> 
    <title> font-weight property </title> 
    <style> 
      .multi{
        text-shadow: 0 0 .1em cyan;
        background-color: black;
        font-size:50px;
        text-align:center;
      }
    </style> 
</head> 
  
<body> 
    <div class="multi"> 
    Glow Effect
    </div> 
 
</body> 
</html>

Test it Now

Next TopicCSS text-transform

← prev next →