BlogsDope image BlogsDope

How to Create Blurred Text with CSS

May 25, 2017 HTML CSS TEXT 20241

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;
}
Blurry Text

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);
}
Blurry Text

You can further create different effects with blurred texts like the one created below.

BLURREDTEXT
BLURREDTEXT

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.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).