Open In App

How to add shadow to text using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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

Last Updated : 15 Sep, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads