Blurred Text & Images In HTML CSS (Simple Examples)

Welcome to a quick tutorial on how to create blurred text and images with CSS. So you want to add some nice effects to your website? Maybe blur out a busy image background, or blur a block of text?

Yes, the dark days of the Internet are over, but there are more ways to play with the blur filter. Let us walk through more examples in this guide – Read on!

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

EXAMPLE 1) BASIC IMAGE BLUR

1A) THE DEMO

 

1B) HTML & CSS

<style>
.demoA { filter: blur(5px); }
</style>
<img src="demo.png" class="demoA">

That’s it. We only need to attach filter: blur(MAGNITIDE) to the image to do the Gaussian blur effect. Sorry for the guys who are looking for something more complicated. 😆

 

 

EXAMPLE 2) BLURRED BACKGROUND IMAGE

2A) THE DEMO

 

2B) THE HTML

<div class="demoB">
  <div class="backB"></div>
  <div class="textB">Keep calm and drink boba tea.</div>
</div>

At the time of writing, filter: blur will apply to the entire container… There is no way to specify “blur background only”. So to create a blurred background, we are going to need some smart layering:

• <div class="demoB"> A container to hold the background image and text.
• <div class="backB"> Background image.
• <div class="textB"> Foreground text.

 

2C) THE CSS

/* (A) FULLSCREEN COVER */
body { padding: 0; margin: 0; }
.demoB { min-height: 100vh; }
.textB { overflow: auto; }

/* (B) LAYERING */
.demoB { position: relative; }
.backB, .textB {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
.backB { z-index: 1; }
.textB { z-index: 2; }

/* (C) BACKGROUND IMAGE */
.backB {
  background: url(demo.png);
  background-size: cover;
  filter: blur(5px);
}

Yikes. This looks complicated, but a quick walkthrough:

1. Set the dimensions of the <div class="demoB"> container.
2. Stack <div class="textB"> on top of <div class="backB">.
3. Set the background image on <div class="backB">, and apply filter: blur().

 

 

3) PARTIAL BLUR

3A) THE DEMO

 

3B) THE HTML

<div class="demoC">
  <div class="backC"></div>
  <div class="blurC"></div>
  <div class="textC">Keep calm and drink boba tea.</div>
</div>

Things get even more complex if you only want a partial blur. This is basically the same as the previous example, except that it has more “layers”.

• <div class="demoC"> The container.
• <div class="backC"> Background image, fully sharp.
• <div class="blurC"> Same background image, but blurred.
• <div class="textC"> Foreground text.

 

3C) THE CSS

/* (A) DIMENSIONS */
.demoC { width: 600px; height: 450px; }
.backC { width: 100%; height: 100%; }
.blurC, .textC { width: 100%; height: 100px; }
 
/* (B) LAYERING */
.demoC { position: relative; }
.backC, .blurC, .textC { position: absolute; }
.backC { top: 0; left: 0; }
.blurC, .textC { bottom: 0; left: 0; }
.backC { z-index: 1; }
.blurC { z-index: 2; }
.textC { z-index: 3; }
 
/* (C) BACKGROUND IMAGE */
.backC, .blurC { background: url("demo.png"); }
.blurC {
  filter: blur(5px);
  background-position-y: -350px; /* 450px - 100px = 350px */
}

It’s the same old layering trick, but take note of how it works:

• <div class="backC"> The “background layer”.
  • Fully covers over <div class="demoC">.
  • Contains the “sharp background image”.
• <div class="textC"> The “top layer”.
  • Covers the bottom part of <div class="demoC">.
  • Contains the text/content.
• <div class="blurC"> The “middle layer”.
  • Acts as the background of the text.
  • We apply the blurred image on this layer.

 

 

 

4) BASIC TEXT BLUR

4A) THE DEMO

BLUR!?

BLUR.

 

4B) HTML & CSS

<style>
.demoD { filter: blur(1px); }
.demoD-shade {
  color: transparent;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}
</style>
 
<p class="demoD">BLUR!?</p>
<p class="demoD-shade">BLUR.</p> 

Yep. It does not take a genius to figure out that filter: blur() can also be applied to the text. But as a small “honorable mention”, we used to play with a simple “CSS hack” to create blurred text in the past:

• Set an appropriate text-shadow.
• Then set color: transparent on the text, so that the “sharp text” will be hidden; All that remains is the blurry text-shadow.

Just stick with using filter: blur()… Use the old trick only if you have to support the ancient browsers.

 

 

5) PARTIAL TEXT BLUR

5A) THE DEMO

Various Shades Of Blur

 

5B) HTML & CSS

.demoE { filter: blur(1px); }
.demoF { filter: blur(2px); }
.demoG { filter: blur(3px); }
 
<p>
  Various
  <span class="demoE">Shades</span>
  <span class="demoF">Of</span>
  <span class="demoG">Blur</span>
</p>

Thankfully, controlling blur with text is a lot easier. Just create various different classes and degrees of blur and attach them accordingly.

 

 

 

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a "paid scripts and courses" business, so every little bit of support helps.

Buy Me A Meal Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, 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.

 

 

LIMITATIONS & COMPATIBILITY

These are all rendered by CSS on-the-fly after all. Lower-end devices are going to take a performance hit, so don’t go too crazy with the blur and shadow effects. Also, ancient browsers do not support CSS effects.

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

 

OTHER CSS FILTERS

As a small side note, CSS actually has a whole load of other image filters that you can play with – Brightness, contrast, grayscale, hue, sepia, invert, etc… Check it out if you want.

• Filter Functions – MDN

 

LINKS & REFERENCES

• Blur – MDN
• Text Shadow – MDN
• How to create clipped, blurred background images in CSS – Cody House
• Convert an image into Blur using HTML/CSS – GeeksForGeeks
• Fun With Blurred Text – CSS Tricks
• Example on CodePen – Simple Image Text Blur | Background Image Blur

 

INFOGRAPHIC CHEAT SHEET