CSS Shadow Effects
Shadow effects are something CSS can create for you!
CSS Text Shadow
To put a shadow on text, use the CSS text-shadow property.
The horizontal and vertical shadow are all you need to set at minimum. A shadow color and a blur effect are optional extras.
Basic text shadow
Only a horizontal and a vertical shadow here, with neither color nor blur.
Prompt
Show an h1 heading with the text "Text shadow effect!" that has a horizontal shadow of 2px and a vertical shadow of 2px, with no color or blur specified.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Text Shadow</title>
</head>
<body>
<h1 style="text-shadow: 2px 2px;">Text shadow effect!</h1>
</body>
</html>
Text shadow with color
The same shadow, now colored red.
Prompt
Show an h1 heading with the text "Text shadow effect!" that has a 2px horizontal shadow, 2px vertical shadow, and a red color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Shadow with Color</title>
</head>
<body>
<h1 style="text-shadow: 2px 2px red;">Text shadow effect!</h1>
</body>
</html>
Text shadow with blur
The shadow keeps its color and gains a blur effect.
Prompt
Show an h1 heading with the text "Text shadow effect!" that has a 2px horizontal shadow, 2px vertical shadow, 5px blur effect, and red color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Shadow with Blur</title>
</head>
<body>
<h1 style="text-shadow: 2px 2px 5px red;">Text shadow effect!</h1>
</body>
</html>
White text with black shadow
A black shadow sits behind white text.
Prompt
Show an h1 heading with the text "Text shadow effect!" in white color with a text-shadow of 2px 2px 4px #000000. Use a dark or contrasting background so the white text is visible.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>White Text with Black Shadow</title>
</head>
<body>
<h1 style="color: white; text-shadow: 2px 2px 4px #000000;">Text shadow effect!</h1>
</body>
</html>
Red neon glow
The shadow here creates a red neon glow.
Prompt
Show an h1 heading with the text "Text shadow effect!" that has a red neon glow effect using text-shadow: 0 0 3px #ff0000.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Red Neon Glow</title>
</head>
<body>
<h1 style="text-shadow: 0 0 3px #ff0000;">Text shadow effect!</h1>
</body>
</html>
Multiple Shadows
One text can carry several shadows: just list them, separated by commas.
Red and blue neon glow
Two shadows combine into a red and blue neon glow.
Prompt
Show an h1 heading with the text "Text shadow effect!" that has two text shadows: a red glow (0 0 3px #ff0000) and a blue glow (0 0 5px #0000ff).
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Shadows Neon Glow</title>
</head>
<body>
<h1 style="text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;">Text shadow effect!</h1>
</body>
</html>
White text with multiple shadows
Black, blue, and darkblue shadows sit behind white text.
Prompt
Show an h1 heading with the text "Text shadow effect!" in white color with three text shadows: 1px 1px 2px black, 0 0 25px blue, and 0 0 5px darkblue.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Shadows on White Text</title>
</head>
<body>
<h1 style="color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;">Text shadow effect!</h1>
</body>
</html>
Border around text
With no actual shadows in sight, text-shadow can also draw a plain border around text.
Prompt
Show an h1 heading with the text "Border around text!" in coral color, with text-shadow used to create a plain black border effect: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Around Text</title>
</head>
<body>
<h1 style="color: coral; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Border around text!</h1>
</body>
</html>