CSS Text Shadow
All About EffectsIn this lesson, we will learn how to apply text shadow effect on a text element using the CSS text-shadow property.
CSS text-shadow Property
The CSS text-shadow property is used to add shadows to text elements on your web page.
The basic syntax for applying a text shadow to an element is:
text-shadow: x-offset y-offset blur color;- x-offset: The x-offset value move the shadow right, while negative value move it left.
- y-offset: The y-offset value move the shadow down, while negative values move it up.
- blur: Specifies the blur radius of the shadow. A higher value results in a more diffuse shadow.
- color: Sets the color of the shadow.
Basic Text Shadow
Let's start with a basic example. Suppose you want to add a gray shadow to a heading:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Basic Text Shadow Example</title>
<!-- Internal CSS -->
<style>
.shadow {
text-shadow: 5px 5px 4px gray;
}
</style>
</head>
<body>
<h1 class="shadow">TEXT SHADOW EFFECT</h1>
</body>
</html>In this example, the text will have a shadow that is 5 pixels to the right, 5 pixels down, with a blur radius of 4 pixels, and the shadow color is gray.
Multiple Shadows
You can apply multiple shadows to the same text element for unique effects. Here's an example of multiple shadows on a paragraph:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multiple Shadows Example</title>
<!-- Internal CSS -->
<style>
.shadow {
text-shadow: 5px 5px 4px gray, -3px -2px 4px cyan;
}
</style>
</head>
<body>
<h1 class="shadow">TEXT SHADOW EFFECT</h1>
</body>
</html>In example above, we have two shadows. The first is gray, and the second is cyan.
Creating a Neon Text Effect
Now, let's create a cool neon text effect. We'll use a larger blur radius and change the shadow color to achieve this effect:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Neon Text Effect Example</title>
<!-- Internal CSS -->
<style>
.shadow {
text-shadow: 0 0 10px #00ff00,
0 0 20px #00ff00,
0 0 30px #00ff00;
color: #fff; /* Set the text color to white for contrast */
}
</style>
</head>
<body>
<h1 class="shadow">NEON TEXT EFFECT</h1>
</body>
</html>Here, we're using multiple shadows to create the neon effect, with increasing blur radius and a bright green color.
