The CSS text-shadow property adds shadow effects directly to text, allowing you to create depth, emphasis, and unique visual styles.
Similar to box-shadow, it accepts values for horizontal and vertical shadow positions, a blur radius, and a shadow color. By default, the value is set to none (no shadow).
Syntax:
.text-element {
/* h-shadow v-shadow blur-radius color */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
| Property | Description |
|---|---|
h-shadow |
(Required) Defines the horizontal position of the shadow. Negative values move the shadow to the left, positive to the right. |
v-shadow |
(Required) Controls the vertical position of the shadow. Negative values move the shadow upwards, positive downwards. |
blur-radius |
(Optional) Determines the blurriness of the shadow. The default is 0, meaning a sharp, solid shadow. |
color |
(Optional) Specifies the color of the shadow. |
none |
No shadow will be applied to the text. This is the default value. |
initial |
Resets the text-shadow property to its default value. |
inherit |
Inherits the value of the text-shadow property from its parent element. |
Note: Unlike box-shadow, the text-shadow property does not have a spread value or an inset keyword.
Let's explore how to use the text-shadow property to create a variety of stunning text effects.
In this example, we apply a vibrant green text shadow to an <h1> element with a horizontal offset of 5px, a vertical offset of 5px, a blur radius of 8px, and the color #00FF00.
<!DOCTYPE html>
<html>
<head>
<title>CSS text-shadow Property</title>
<style>
body {
font-family: sans-serif;
text-align: center;
padding: 40px;
background-color: #f4f4f9;
}
h1 {
color: navy;
font-size: 50px;
/* h-shadow v-shadow blur color */
text-shadow: 5px 5px 8px #00FF00;
}
</style>
</head>
<body>
<h1>IntricateDevo</h1>
</body>
</html>
Just like with box-shadow, you can apply multiple shadows by separating them with commas. By setting the horizontal and vertical offsets to 0 and layering different blur radii, you can create a beautiful glowing text effect.
<!DOCTYPE html>
<html>
<head>
<title>CSS text-shadow Glowing Effect</title>
<style>
.glow-text {
font-size: 50px;
color: #fff;
background-color: #333;
padding: 40px;
text-align: center;
font-family: sans-serif;
/* Multiple shadows stacked to create a glow */
text-shadow: 0 0 10px #FFD700,
0 0 20px #FFA500,
0 0 30px #FF6347;
}
</style>
</head>
<body>
<h2 class="glow-text">Glowing IntricateDevo</h2>
</body>
</html>
In this example, we apply multiple shadows to an element to simulate a 3D, layered, or embossed effect. By combining a dark shadow pushing one way and a light shadow pushing the opposite way, the text appears to pop off the screen.
<!DOCTYPE html>
<html>
<head>
<title>CSS text-shadow 3D Effect</title>
<style>
.depth-text {
font-size: 60px;
font-family: sans-serif;
font-weight: bold;
color: #FF4500; /* Orange-red text */
background-color: #f0f0f0;
padding: 40px;
text-align: center;
/* Dark shadow bottom-right, light shadow top-left */
text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5),
-3px -3px 2px rgba(255, 255, 255, 0.9);
}
</style>
</head>
<body>
<h3 class="depth-text">3D IntricateDevo</h3>
</body>
</html>
rgba() allows you to add opacity (transparency) to your shadows. A semi-transparent black shadow (rgba(0,0,0,0.5)) looks much more natural than a solid gray shadow because it blends with the background.text-shadow on hover is a fantastic way to add subtle, professional interactivity to your links or buttons.How do you apply a glowing effect evenly around all sides of your text using text-shadow?