EN
CSS - blur text
0
points
In this article, we would like to show you how to blur text in CSS.
Quick solution:
.blur {
color: transparent;
text-shadow: 0 0 3px black; /* text-shadow: offset-x offset-y shadow-range shadow-color */
}
Where:
shadow-range- specifies the text blur strength (higher value - more blurred text),shadow-color- specifies the blurred text color, since thecolorproperty is set totransparent.
Practical example
In this example, we create three blurs for our text, starting from the smallest blur to the highest. In blur-3 we specify the color using rgba() that allows us to use alpha parameter which is responsible for setting the opacity (1 - fully visible, 0 - invisible).
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
font-size: 2rem;
}
.blur-1 {
color: transparent;
text-shadow: 0 0 3px black;
}
.blur-2 {
color: transparent;
text-shadow: 0 0 5px black;
}
.blur-3 {
color: transparent;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* rgba with additional alpha parameter set to 0.5 */
}
</style>
</head>
<body>
<div class="blur-1">Some text...</div>
<div class="blur-2">Some text...</div>
<div class="blur-3">Some text...</div>
</body>
</html>
Alternative solution
As an alternative, we can use filter: blur(radius) that applies blur effect to the whole element.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
font-size: 2rem;
}
.blur-1 {
filter: blur(0.1rem);
}
.blur-2 {
filter: blur(0.15rem);
}
.blur-3 {
filter: blur(0.20rem);
}
</style>
</head>
<body>
<div class="blur-1">Some text...</div>
<div class="blur-2">Some text...</div>
<div class="blur-3">Some text...</div>
</body>
</html>