Adding shadows to an element is one component of creating an attractive header. For instance, if you’re designing a website, you may want to add a shadow to every top header to make the header stand out from other header text on the web page.
That’s where the CSS text-shadow property comes in. The text-shadow property allows you to add a shadow effect to a text element. This tutorial will discuss, with examples, the basics of text shadows and how to use the text-shadow property to add a shadow to text on a web page.
CSS Text Shadow
Shadows are one way of distinguishing an element on a web page. A line of text with a green shadow, for example, is more likely to catch the eye of a user than a standard line of black text.
The text-shadow property allows you to add a shadow around a text element in CSS. You can apply the text-shadow element to headers, paragraph text, and other text-based elements in HTML.
The basic syntax for the text-shadow property is as follows:
text-shadow: offset-x offset-y blur-radius color;
The syntax for the text-shadow property is similar to the syntax for the box-shadow property, which is used to apply shadows to box-based HTML elements. To learn more about box shadows in CSS, read our beginner’s guide to CSS box shadows.
Here are the main components of the syntax for the text-shadow property:
- offset-x is the horizontal (x axis) offset for the shadow (required).
- offset-y is the vertical (y axis) offset for the shadow (required).
- blur-radius is the radius of the blur effect for the shadow (optional).
- color is the color of the shadow. The default color for a text-shadow is black (optional).
Let’s explore a few examples of the text-shadow property in action to illustrate how to use the property to create your own text shadows. For the purpose of this tutorial, we’re going to use the following HTML element:
<html>
<h1>Career Karma</h1>
<style>
h1 {
color: lightblue;
}Click the 
button in the code editor above to see the output of our HTML/CSS code.
When we run our code, an <h1> element is rendered which presents the text Career Karma on the screen. <h1> is the largest header element supported by HTML. Our CSS code sets the value of the color property in our header to lightblue. This means our header appears in light blue text.
Basic Text Shadow
There are only two required attributes you need to specify when working with the text-shadow property: offset-x and offset-y. If we specify these two properties, we can create text with a horizontal and vertical shadow.
Here’s an example of the text-shadow property with both these values specified:
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 1px 1px;
}Click the button in the code editor above to see the output of our HTML/CSS code.
In our code, we applied a simple text-shadow to our header. This shadow is offset by 1px on both the horizontal and vertical axes. If you look at the result of our code, you can see there is a slight black shadow applied beneath our text. Black is the default color for a shadow.
Shadow Colors
When you’re designing a text-shadow, you may decide that you want to specify a custom color for your shadow. That’s where the color attribute comes in.
Suppose we wanted our shadow to be light pink. We could change the color of our shadow to pink using this code:
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 1px 1px pink;
}Click the button in the code editor above to see the output of our HTML/CSS code.
In our code, we specified the color attribute and set its value to pink. This allowed us to create a pink shadow beneath our text. Like in our first example, our shadow is offset by 1px on both the horizontal and vertical axes.
Blurred Shadow
The text-shadow property can be used in combination with the blur-radius attribute to create a blurred shadow.
Now, let’s say we want to create a shadow that is offset by 3px on both the horizontal and vertical axes and has a 2px blur effect surrounding the shadow. We could create this shadow using the following code:
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 3px 3px 2px pink;
}Click the button in the code editor above to see the output of our HTML/CSS code.
As you can see, our shadow is offset by 3px on both axes, and our shadow is surrounded by a blur effect. To intensify our blur effect, we could increase the value of the blur-radius attribute. If we wanted a more blurry shadow, we could set the value of blur-radius to 5px, or 10px, or higher, depending on the blur we want to use. In this example, our shadow is pink.
Multiple Shadows
So far, we have discussed how to use the text-shadow property to apply one shadow to a block of text. However, the text-shadow property can also be used to add multiple shadows to a text element.
To add multiple shadows to a block of text, you should create a comma-separated list of shadows. The syntax for creating multiple text shadows is as follows:
text-shadow: shadowOne, shadowTwo;
You can specify as many shadows as you want, as long as each shadow is separated using a comma. However, the x-offset and y-offset values you specify for each shadow must increase over time, otherwise, your shadows will overlap and may not be visible.
The shadows will appear in the order they are specified. So, shadowOne will appear before shadowTwo.
Let’s suppose we want to create a text banner with pink and orange shadows behind the text. We could do so using this code:
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 3px 3px 2px pink, 6px 6px 5px orange;
}Click the button in the code editor above to see the output of our HTML/CSS code.
In our code, we specified two shadows. Here are the values we specified for each of our shadows:
| Property Name | Shadow One | Shadow Two |
| offset-x | 3px | 6px |
| offset-y | 3px | 6px |
| blur-radius | 2px | 5px |
| color | pink | orange |
As you can see, we created two shadows in our code, each with different values.
Conclusion
The text-shadow property is used to add a shadow to a block of text in HTML. Text shadows can be applied to any text-based element such as headers and paragraphs.
This tutorial discussed, with reference to examples, the basics of text shadows and how to use the text-shadow property to create a custom text-shadow. Now you have the knowledge you need to start designing your own CSS text shadows like an expert web designer!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
