Python JavaScript SQL HTML R C C++ Java RUST Golang Kotlin Swift C# DSA

Learn Python practically
and Get Certified.

ENROLL

Popular Tutorials

Getting Started With Python
Python if Statement
while Loop in Python
Python Lists
Dictionaries in Python
Start Learning Python

Popular Examples

Add two numbers
Check prime number
Find the factorial of a number
Print the Fibonacci sequence
Check leap year
Explore Python Examples

Reference Materials

Built-in Functions
List Methods
Dictionary Methods
String Methods
View all
Learning Paths
Challenges

Learn Python Interactively

Try for Free

Courses

Interactive SQL Course
Interactive C Course
Interactive Java Course
View all Courses

Web Tutorials

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,

HTML
CSS
<!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,

HTML
CSS
<!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.

Table of Contents