Skip to content
Related Articles

Related Articles

Improve Article

How to add shadow to text using CSS ?

  • Last Updated : 15 Sep, 2020

The approach of this article is to add a shadow using text-shadow property in CSS. This property accepts a list of a comma-separated list of shadows to be applied to the text. The default value of the text-shadow property is “none”.

Syntax:

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

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            text-shadow: 4px 4px green;
        }
  
        h2 {
            text-shadow: 2px 3px blue;
        }
    </style>
</head>
  
<body style="text-align:center;">
    <h1>
        GeeksForGeeks
    </h1>
    <h2>
        How to apply shadow effects
        to text using CSS?
    </h2>
</body>
  
</html>

Output:

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :