How to apply shadow effect on text using CSS
Topic: HTML / CSSPrev|Next
Answer: Use the CSS text-shadow property
You can simply use the CSS text-shadow property to apply the shadow effect (like Photoshop drop-shadow style) on text elements. You can also apply more than one shadow (applied front-to-back) through providing a comma-separated list of shadows.
Each shadow is specified as an offset from the text (horizontal and vertical), along with the blur radius value and optional color value. Let's try out an example to see how it works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Text Shadow Effect</title>
<style>
p{
font: 26px sans-serif;
}
p.shadow{
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
p.shadow-multiple{
text-shadow: 2px 2px 3px yellow, 3px 3px 5px red;
}
p.shadow-outline{
color: #fff;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
</style>
</head>
<body>
<p class="shadow">This is a simple example of text shadow effect.</p>
<p class="shadow-multiple">This is a simple example of multiple text shadow effect.</p>
<p class="shadow-outline">This is one more example of multiple text shadow effect.</p>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
