One of the best effects to stylize your text is making it appear blurred. In this snippet, we are going to show you two methods of creating a blurry text. So here we go.
Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
Solution with the CSS text-shadow property
The first way of creating a blurred text is making your text transparent and applying shadow to it. The shadow will make the text appear blurred. Use a <div> with an id "blur". Then, set the color property to its “transparent” value and define the text-shadow property to give a shadow to the text.
So here is the example. You can try it yourself.
Example of creating a blurry text with the text-shadow property:
<!DOCTYPE html><html> <head> <title>Title of the document</title> <style> #blur { font-size: 40px; color: transparent; text-shadow: 0 0 8px #000; } </style> </head> <body> <div id="blur">Blurry Text</div> </body></html>Result
Blurry Text
If you want your text to look more or less blurry, you can change the blur radius value of the text-shadow property according to the size of your text.
The method will not work in the browsers, which don’t support the text-shadow property.
Another way is using the CSS filter property with its “blur” value. The larger the value, the more blurred your text will be.
Example of creating a blurry text with the filter property:
<!DOCTYPE html><html> <head> <title>Title of the document</title> <style> #blur { font-size: 40px; filter: blur(3px); -webkit-filter: blur(3px); } </style> </head> <body> <div id="blur">Blurry Text</div> </body></html>You can try different blur effects, for example, you can make some letters of the text blurred and others not.
In that case, each letter must be enclosed in a <span>, so that the blurred effect and font-size can be defined for each <span> separately.
Example of creating a blurry text with some effects:
<!DOCTYPE html><html> <head> <title>Title of the document</title> <style> #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: 35px; font-family: 'Carme', sans-serif; } #blur span:nth-child(3) { color: transparent; text-shadow: 0 0 2px #fff; font-size: 33px; font-family: 'Carme', sans-serif; } #blur span:nth-child(4) { color: transparent; text-shadow: 0 0 4px #fff; font-size: 34px; font-family: 'Carme', sans-serif; } #blur span:nth-child(5) { color: transparent; text-shadow: 0 0 6px #fff; font-size: 41px; 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: 36px; 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; } </style> </head> <body> <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> </body></html>In the code above, each letter of the <div> acts as a <span>. We used the :nth-child() selector for selecting nth span element.
