EN
CSS - text shadow
3
points
In this article, we would like to show you how to add text shadow using CSS.
Quick solution:
p {
text-shadow: 1px 1px 2px black; /* text-shadow: offset-x offset-y blur-radius shadow-color */
}
Example:
Practical example
In this example, we present three different text shadows depending on the number of arguments.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
margin-top: 15px;
font-size: 20px;
}
.shadow1 { text-shadow: 5px 5px; } /* offset-x offset-y */
.shadow2 { text-shadow: 3px 3px #ffb8b8; } /* offset-x offset-y shadow-color */
.shadow3 { text-shadow: 2px 2px 2px yellow; } /* offset-x offset-y blur-radius shadow-color */
.shadow4 { text-shadow: 2px 2px 10px blue; } /* offset-x offset-y blur-radius shadow-color */
</style>
</head>
<body>
<div class="shadow1">Example text...</div>
<div class="shadow2">Example text...</div>
<div class="shadow3">Example text...</div>
<div class="shadow4">Example text...</div>
</body>
</html>