Open In App
Related Articles

CSS text-shadow Property

Improve Article
Save Article
Like Article

The text-shadow property in CSS is used to add shadows to the text. This property accepts a list of shadows that are to be applied to the text, separated by the comma. The default value of the text-shadow property is none.


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

Property values: 

  • h-shadow: This property is required & used to specify the position of horizontal shadow. It accepts the negative values.
  • v-shadow: This property is required & used to specify the position of vertical shadow. It also accepts the negative values.
  • blur-radius: It is used to set the blur radius. Its default value is 0 & is optional.
  • none: It represents no shadow added to the text, this is the default value.
  • color: It is used to set the color of the shadow. It is optional.
  • initial: It is used to set text-shadow to its default value.
  • inherit: This property is inherited from its parent element.

Example: This example shows the use of the text-shadow property with specific values assigned in pixels.


<!DOCTYPE html>
    <title> CSS | text-shadow Property </title>
    h1 {
        text-shadow: 5px 5px 8px #00FF00;
    <h1> GeeksforGeeks </h1>


Supported Browsers: The browsers supported by the text-shadow property are listed below:

  • Google Chrome 2.0
  • Internet Explorer 10.0
  • Microsoft Edge 12.0
  • Firefox 3.5
  • Opera 9.5
  • Safari 1.1
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 30 Jun, 2022
Like Article
Save Article
Similar Reads
Complete Tutorials