This is a great text effect where you can stylize your text and make it appear blurred. In this post, I am mentioning two of the ways by which you can make your text blurry. So, let's quickly go through both the methods.
Method 1
The first way to do so is to make your text transparent and give it some text shadow. In this case, the blurred text effect that you see is actually the text shadow.
HTML
<div id="blur">Blurry Text</div>
CSS
#blur{
font-size: 40px;
color: transparent;
text-shadow: 0 0 8px #000;
}
You can make the text more and less blurry by changing the blur radius with respect to the size of the text.
Though quite useful, the blurred effect by this method will not be supported by browsers which don't support the text-shadow
property.
Method 2
The second way is by using the blur
function of the filter
property of CSS. The larger the value (in px) given to the blur function, the more blurred will be the effect.
HTML
<div id="blur">Blurry Text</div>
CSS
#blur{
font-size: 40px;
filter: blur(3px);
}
You can further create different effects with blurred texts like the one created below.
In both these effects, each letter of the text is enclosed in a span and then the blurred text effect and font size is changed for each span. I have used the first method to blur the text.
The code for the first effect is given below.
HTML
<div id="blur"><span>B</span><span>L</span><span>U</span><span>R</span><span>R</span><span>E</span><span>D</span><span>T</span><span>E</span><span>X</span><span>T</span></div>
CSS
#blur{
display:inline-block;
padding: 20px 30px;
margin:20px auto;
letter-spacing:2px;
background-color:#000;
}
#blur span:nth-child(1){
color:transparent;
text-shadow: 0 0 0 #fff;
font-size:32px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(2){
color:transparent;
text-shadow: 0 0 2px #fff;
font-size:34px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(3){
color:transparent;
text-shadow: 0 0 4px #fff;
font-size:36px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(4){
color:transparent;
text-shadow: 0 0 6px #fff;
font-size:38px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(5){
color:transparent;
text-shadow: 0 0 8px #fff;
font-size:40px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(6){
color:transparent;
text-shadow: 0 0 10px #fff;
font-size:40px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(7){
color:transparent;
text-shadow: 0 0 8px #fff;
font-size:40px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(8){
color:transparent;
text-shadow: 0 0 6px #fff;
font-size:38px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(9){
color:transparent;
text-shadow: 0 0 4px #fff;
font-size:36px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(10){
color:transparent;
text-shadow: 0 0 2px #fff;
font-size:34px;
font-family: 'Carme', sans-serif;
}
#blur span:nth-child(11){
color:transparent;
text-shadow: 0 0 0 #fff;
font-size:32px;
font-family: 'Carme', sans-serif;
}
In the above code, each letter of the div acts like a span. The selector :nth-child(n)
selects the nth span element which is a child of the div. The rest of the code must be clear to you.
Conclusion
These were two of the methods by which you can make your texts blurred. Browser support may be a problem since all those browsers which don't support the text-shadow
property will result in invisible text by Method 1 and those which don't support the filter
property will not give any blurred effect by Method 2.
You can come up with many creative stuff using this effect like using different colored text shadows or animating the blurred effect in a specific pattern. If you have created one, then share it in the comment section below.