4 Ways To Create Blurred Text In HTML CSS

Welcome to a quick tutorial on how to create blurred text in HTML CSS. So you want to add some effects and blur a block of text?

The easiest way to create a block of blurred text is to use the CSS blur filter – <p style="filter: blur(5px);">BLUR</p>

Yes, the dark days of the Internet are over, and there are more ways to “create blur”. Read on for more examples!

 

 

TABLE OF CONTENTS

 

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

EXAMPLE CODE DOWNLOAD

Click here to download | Example on CodePen

Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

HTML CSS TEXT BLUR

With that, let us now get into the various ways and examples to create blurred text in HTML CSS.

 

TUTORIAL VIDEO

 

1) BLUR FILTER

1-filter.html
<style>
#demoA1 { filter: blur(1px); }
#demoA2 { filter: blur(2px); }
#demoA3 { filter: blur(3px); }
</style>
 
<p id="demoA1">Hello World</p>
<p id="demoA2">Hello World</p>
<p id="demoA3">Hello World</p>
Hello World
Hello World
Hello World

Don’t think this needs an explanation. As in the introduction, filter: blur() is the easiest way to create a block of blurred text.

 

2) TEXT SHADOW

2-shadow.html
<style>
#demoB1 {
  text-shadow: 1px 1px 5px black;
}
#demoB2 {
  color: transparent;
  text-shadow:
    0px 0px 2px rgba(255, 0, 0, 0.8),
    2px 2px 2px rgba(0, 0, 255, 0.7);
}
</style>
 
<p id="demoB1">Hello World</p>
<p id="demoB2">Hello World</p>
Hello World
Hello World

This is an alternative to filter: blur, we use text-shadow to create the blur effect.

  • text-shadow takes in 4 parameters – x-offset y-offset radius color
  • The idea is to set a “good enough” spread radius and color, so the text will appear blurred.
  • We can also set the original text to transparent, and stack multiple text shadows to create interesting blur effects.

 

 

3) BACKDROP FILTER

3-backdrop.html
<style>
#demoCWrap { position: relative; }
#demoCBlur {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  backdrop-filter: blur(3px);
  background: rgba(255, 255, 255, 0.5); /* optional */
}
</style>
 
<div id="demoCWrap">
  <div id="demoCBlur"></div>
  <p id="demoCTxt">Hello World</p>
</div>

Hello World

This is a roundabout way to blur an entire container.

  • Take note of the HTML layout – We place <div id="demoCBlur"> and<p id="demoCTxt"> into <div id="demoCWrap">.
  • We set <div id="demoCBlur"> as a “blurred background” with backdrop-filter: blur().
  • Then, position <div id="demoCBlur"> over <p id="demoCTxt">.

Some people may think “this is stupid”, but no. We can quickly cover an entire section or HTML form using this method.

 

4) SELECTIVE OR PARTIAL BLUR

4-selective.html
<style>
#demoD1 { filter: blur(2px); }
#demoD2 {
  color: transparent;
  text-shadow:
    0px 0px 2px rgba(255, 0, 0, 0.8),
    2px 2px 2px rgba(0, 0, 255, 0.7);
}
</style>
 
<p>
  Hello
  <span id="demoD1">Shades</span>
  Of
  <span id="demoD2">Blur</span>.
</p>
Hello Shades Of Blur.

Sadly, there are no smart ways to “directly specify which words to blur” in CSS. But we can break a paragraph into multiple words in HTML and specify which ones to blur.

 

 

EXTRAS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEATSHEET

Ways To Create Blurred Text In HTML CSS (Click To Enlarge)

 

COMPATIBILITY CHECK

CSS filter effects should work on all modern browsers. But take note – These are rendered by CSS on the fly… Low-end devices are going to take a performance hit, don’t go crazy with “too much blur”.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

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