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?

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

 

 

EXAMPLE CODE DOWNLOAD

Source code on GitHub Gist | 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

 

 

 

TUTORIAL VIDEO

 

1) BLUR FILTER

<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>

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

<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>

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

<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>

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

<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>

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.

 

 

 

COMPATIBILITY CHECK

• CSS Filter Effects – CanIUse
• CSS Text Shadow – CanIUse

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

• Blur – MDN
• Text Shadow – MDN
• Filter Functions – MDN
• Blurred Images – Code Boxx