CSS Text Shadow
The text-shadow property adds a shadow to text.
In its simplest form you give the horizontal and vertical offset of the shadow. You can also add a shadow color and a blur effect.
Horizontal and vertical shadow
The shadow is offset 2px right and 2px down.
Prompt
An HTML page that adds a simple text shadow.
In an internal
<style> block, give the <h1> text-shadow: 2px 2px (horizontal and vertical offset only). Add a heading.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Shadow with color
The same shadow is given a red color.
Prompt
An HTML page that adds a colored text shadow.
In an internal
<style> block, give the <h1> text-shadow: 2px 2px red. Add a heading.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Shadow with blur
A 5px blur is added to the red shadow.
Prompt
An HTML page that adds a colored, blurred text shadow.
In an internal
<style> block, give the <h1> text-shadow: 2px 2px 5px red (offset, blur, color). Add a heading.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
More Text Shadow Examples
Here are a couple more text-shadow effects.
White text with shadow
White text with a soft dark shadow.
Prompt
An HTML page with white text and a dark text shadow.
In an internal
<style> block, make the <h1> white with text-shadow: 2px 2px 4px #000000. Add a heading.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Red neon glow
A shadow with no offset and a red blur creates a glow.
Prompt
An HTML page with a red neon glow text shadow.
In an internal
<style> block, give the <h1> text-shadow: 0 0 3px #ff0000 (no offset, just a red blur for a glow). Add a heading.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-shadow: 0 0 3px #ff0000;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Multiple Shadows
The text-shadow property also accepts more than one shadow. List each shadow separated by commas.
Red and blue glow
Two stacked shadows make a red and blue neon glow.
Prompt
An HTML page with two stacked text shadows for a red and blue neon glow.
In an internal
<style> block, give the <h1> text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff (two comma-separated shadows). Add a heading.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Black, blue, and red glow
White text with three stacked shadows for a black, blue, and red glow.
Prompt
An HTML page with white text and three stacked shadows for a black, blue, and red glow.
In an internal
<style> block, make the <h1> white with text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red. Add a heading.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
The CSS Text Shadow Property
The property covered on this page is text-shadow, which sets the shadow effect added to text.