How To Make Blurry Text Using CSS?

By Faruque Ahamed Mollick

I am again with a new article with another simple and easy CSS trick. In this article I am going to show you how to give a text blur effect to make it blurry. I hope this article is going to be helpful for you.

CSS code to make text blurry

Here is the CSS code snippet given below which will make text blur:

.blurry {
   text-shadow: 0 0 4px rgba(0,0,0,0.7);
   color: transparent;
}

That’s all you need to do. Now test the code in your browser. You will able to see blurry text like the given image below:

You can modify the code to make the blur effect low and high. Start testing by changing the value of “4px” and “0.7” that you can see in the above CSS code and chose which value are better and can fulfill your need.

The HTML code that I have used to see the result

I have used the below HTML code to see the result of “.blurry” CSS class:



<div class="blurry">
  <h1>This is blurry text H1</h1>
  <h2>This is blurry text H2</h2>
  <h3>This is blurry text H3</h3>
</div>

You can see the result of this HTML code using in the above image.

So now you have understand how to give blur effect to any text using CSS code. It was very easy to do. Isn’t it? What you think? Well thanks for reading this article. I am soon coming with more CSS code snippet to help you in many ways.

If you like this article then you can share it on social media like Facebook or Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *