html tutorial - How to apply shadow effect on text using CSS - html5 - html code - html form
Answer: Use the CSS text-shadow property
The CSS text-shadow property display the shadow effect on text elements. User can apply more than one shadow by using 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. Check out the following example:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Text Shadow Effect</title>
<style type="text/css">
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 another example of multiple text shadow effect.</p>
</body>
</html>