CSS Text Shadow
Shadows in CSS are a powerful way to make your text and elements look more engaging. By adding shadows, you can give your website a sense of depth, make important content stand out, and even create glowing effects that grab attention.
CSS provides two main properties to create shadow effects:
text-shadow→ for adding shadows to text.box-shadow→ for adding shadows to boxes, divs, buttons, and other elements.
Let’s go step by step with examples and explanations.
CSS Text Shadow
The text-shadow property allows you to add shadows behind your text. It accepts values in the following format:
- Horizontal shadow (X-axis): Moves the shadow left or right.
- Vertical shadow (Y-axis): Moves the shadow up or down.
- Blur radius (optional): How soft or sharp the shadow looks.
- Color: The color of the shadow.
text-shadow: horizontal vertical blur color;
Basic Example
h1 {
text-shadow: 2px 2px;
}Adding Shadow with Color
You can use the text-shadow property to add shadows in any color, making your text more stylish and noticeable.
h1 {
text-shadow: 2px 2px red;
}
Adding Blur Effect
The text-shadow property lets you blur shadows by adding a blur radius, giving your text a softer and more glowing appearance.
h1 {
text-shadow: 2px 2px 5px red;
}
White Text with Black Shadow
This is great for making light text visible on colorful backgrounds.
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
Neon Glow Effect
You can simulate a glowing text effect by using a blur with a bright color.
h1 {
text-shadow: 0 0 3px #FF0000;
}
Multiple Text Shadows
CSS allows you to add multiple shadows to the same text by separating them with commas. This creates richer visual effects.
Red + Blue Glow
You can combine multiple shadows with different colors using text-shadow to create a glowing effect, like red and blue neon around your text.
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
White Text with Layered Shadows
By applying multiple shadows in different colors and positions, you can create depth and a glowing effect around white text.
h1 {
color: white;
text-shadow: 1px 1px 2px black,
0 0 25px blue,
0 0 5px darkblue;
}
Border-Like Effect with Shadows
Instead of using stroke (not supported in all browsers), you can fake a border around text with shadows:
h1 {
color: coral;
text-shadow: -1px 0 black,
0 1px black,
1px 0 black,
0 -1px black;
}
CSS Box Shadow
While text-shadow only works on text, box-shadow lets you add shadows to any element (buttons, cards, containers).
Basic Box Shadow
div {
width: 200px;
height: 100px;
background: lightblue;
box-shadow: 5px 5px;
}
Box Shadow with Blur and Color
The box-shadow property lets you add a shadow with blur and color to any element, creating a soft, realistic, and visually appealing depth effect.
div {
box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
}
Multiple Box Shadows
You can add several shadows to an element by separating them with commas, creating layered or glowing effects for more striking designs.
div {
box-shadow: 0 0 10px red, 0 0 20px blue;
}HTML example combining all the CSS text-shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Text Shadows - Part 1</title>
<style>
body {
background-color: #1e1e1e;
color: white;
font-family: Arial, sans-serif;
padding: 20px;
line-height: 2;
}
h2 {
margin-top: 50px;
font-size: 36px;
text-align: center;
}
/* 1. CSS Text Shadow */
.text-shadow-basic {
text-shadow: 2px 2px;
}
/* 2. Adding Shadow with Color */
.text-shadow-color {
text-shadow: 2px 2px red;
}
/* 3. Adding Blur Effect */
.text-shadow-blur {
text-shadow: 2px 2px 5px green;
}
/* 4. White Text with Black Shadow */
.text-shadow-white-black {
color: white;
text-shadow: 2px 2px 4px black;
}
/* 5. Neon Glow Effect */
.text-shadow-neon {
color: #0ff;
text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff;
}
/* 6. Red + Blue Glow */
.text-shadow-red-blue {
text-shadow: 0 0 3px red, 0 0 5px blue;
}
/* 7. White Text with Layered Shadows */
.text-shadow-layered {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
/* 8. Border-Like Effect with Shadows */
.text-shadow-border {
color: coral;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
</head>
<body>
<h2 class="text-shadow-basic">CSS Text Shadow</h2>
<h2 class="text-shadow-color">Adding Shadow with Color</h2>
<h2 class="text-shadow-blur">Adding Blur Effect</h2>
<h2 class="text-shadow-white-black">White Text with Black Shadow</h2>
<h2 class="text-shadow-neon">Neon Glow Effect</h2>
<h2 class="text-shadow-red-blue">Red + Blue Glow</h2>
<h2 class="text-shadow-layered">White Text with Layered Shadows</h2>
<h2 class="text-shadow-border">Border-Like Effect with Shadows</h2>
</body>
</html>Output :
HTML example combining all the CSS box-shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Box Shadows - Part 2</title>
<style>
body {
background-color: #1e1e1e;
color: white;
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
.box {
width: 200px;
height: 100px;
margin: 20px auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 18px;
border-radius: 5px;
}
/* 9. CSS Box Shadow */
.box-shadow-basic {
background-color: #3498db;
box-shadow: 5px 5px;
}
/* 10. Box Shadow with Blur and Color */
.box-shadow-blur-color {
background-color: #e74c3c;
box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
}
/* 11. Multiple Box Shadows */
.box-shadow-multiple {
background-color: #2ecc71;
box-shadow: 2px 2px 5px black, -2px -2px 5px gray, 4px 4px 10px blue;
}
</style>
</head>
<body>
<div class="box box-shadow-basic">Box Shadow</div>
<div class="box box-shadow-blur-color">Box Shadow with Blur & Color</div>
<div class="box box-shadow-multiple">Multiple Box Shadows</div>
</body>
</html>Output :
