CSS Text Shadow

CSS text-shadow property is used to add shadow to the text. For example,

h1 {
    text-shadow: 1px 1px 2px red;
}

Browser Output

CSS Text Shadow Description

Here, the text-shadow property creates a red shadow behind the text of the h1 element.


Syntax of Text-Shadow

The syntax of the text-shadow property is as follows,

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

Here,

  • h-shadow: specifies the length of horizontal shadow; negative values are allowed
  • v-shadow: specifies the length of vertical shadow; negative values are allowed
  • blur-radius: specifies the value to blur the shadow
  • color: specifies the color of the shadow
  • none: specifies the default value, no shadow
  • initial: sets the default value
  • inherit: inherits the value from its parent element

Note: The values of horizontal shadow and vertical shadow are required for the text-shadow property.


Example: CSS Text-Shadow Property

Let's see an example of text-shadow property,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS text-shadow</title>
    </head>

    <body>
        <h1>Pride & Prejudice (Jane Austen)</h1>
    </body>
</html>
h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
CSS Text Shadow Example Description

Here, the values used in our text-shadow property are,

  1. 2px- horizontal offset
  2. 2px- vertical offset
  3. 4px- blur radius
  4. rgba(0, 0, 0, 0.5) - color of the shadow (semi-transparent black)

Note: Offset refers to the distance between the shadow and the text element.


Multiple Shadows

We can provide a list of comma-separated values in the text-shadow property for creating multiple shadows. For example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS text-shadow</title>
    </head>

    <body>
        <h1>Pride & Prejudice (Jane Austen)</h1>
    </body>
</html>
h1 {
    /* create a text shadow using multiple values */
    text-shadow: 1px 1px 1px black, 3px 3px 5px blue;
}

Browser Output

CSS Multiple Text Shadow Example Description

In the above example, we have the following CSS declaration having two values for the text-shadow property,

text-shadow: 1px 1px 1px black, 3px 3px 5px blue;

Here,

  • 1px 1px 1px black- creates the first shadow with 1px of horizontal and vertical shadow offset and 1px of blur radius with black color
  • 3px 3px 5px blue - creates second shadow with 3px of horizontal and vertical shadow offset, and 5px of blur radius with blue color

The combination of both shadows creates a more complex and visually appealing effect.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges