Blurred Text & Images With Pure 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 in a Carousel? 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!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes	Image Blur	Text Blur
Useful Bits & Links	The End

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

EXAMPLE 1) BASIC BLUR

1A) THE DEMO

 

1B) HTML & CSS

<style>
.demoA { filter: blur(10px); }
</style>
<img src="alpaca.jpg" 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

2A) THE DEMO

 

2B) THE HTML

<div class="demoB">
  <div class="backB"></div>
  <div class="frontB">Lorem ipsum dolor sit amet.</div>
</div>

Sadly, things are not as straightforward when it comes to a blurred background. For the HTML, we are going to need:

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

 

2C) THE CSS

/* (A) CONTAINER - RESIZE AS REQUIRED */
.demoB { width: 600px; height: 348px; }
 
/* (B) LAYERS */
.demoB { position: relative; }
.backB, .frontB {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.backB { z-index: 1; } /* behind */
.frontB { z-index: 2; } /* in front */
 
/* (C) BLURRED BACKGROUND IMAGE */
.backB {
  background: url(alpaca.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(10px);
}
 
/* (D) FRONT TEXT */
.frontB {
  /* (D1) CENTER */
  display: flex; text-align: center;
  align-items: center; justify-content: center;
 
  /* (D2) COSMETICS */
  color: #fff;
  font-size: 20px;
  text-shadow: 2px 2px #545454;
}

Yikes. This looks complicated, but let us walk through part-by-part:

1. First, we set the dimensions of the .demoB container. We can also use relative units if required (percentage or viewport).
2. Next, layer the background image and text. I.E. “Stack” the text on top of the background.
   • .demoB { position: relative; } is required for position: absolute to work properly.
   • .backB, .frontB { position:absolute; top:0; left:0; } does the layering magic.
   • .backB { z-index:1; } .frontB { z-index:2; } sets the layering order.
   • Finally, .backB, .frontB { width:100%; height:100%; } fully fills both layers into .demoB.
3. Set the background image, blur it with filter: blur() as usual.
4. Cosmetics for the text.

 

 

3) PARTIAL BLUR

3A) THE DEMO

 

3B) THE HTML

<div class="demoC">
  <div class="backC"></div>
  <div class="blurC"></div>
  <div class="frontC">
    <h3>ALPACA SAYS</h3>
    <p>UVUVWEVWEVWE ONYETENYEVWE UGWEMUBWEM OSSAS!</p>
  </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 usual container.
• <div class="backC"> Background image, fully sharp.
• <div class="blurC"> Same background image, but blurred.
• <div class="frontC"> Foreground text.

 

3C) THE CSS

/* (A) CONTAINER - RESIZE AS REQUIRED */
.demoC { width: 600px; height: 348px; }
 
/* (B) LAYERS */
/* (B1) ORDER */
.demoC { position: relative; }
.backC, .blurC, .frontC { position: absolute; }
.backC { top: 0; left: 0; }
.blurC, .frontC { bottom: 0; left: 0; }
.backC { z-index: 1; } /* behind */
.blurC { z-index: 2; } /* middle */
.frontC { z-index: 3; } /* front */
 
/* (B2) DIMENSIONS */
.backC { width: 100%; height: 100%; }
.blurC, .frontC { width: 100%; height: 100px; }
 
/* (C) BACKGROUND IMAGE */
/* (C1) BOTH LAYERS SHARE SAME BACKGROUND IMAGE */
.backC, .blurC { background: url("alpaca.jpg"); }
 
/* (C2) BUT MIDDLE LAYER IS BLUR */
/* 348PX - 100PX = 248PX */
.blurC {
  filter: blur(5px);
  background-position-y: -248px;
}
 
/* (D) FRONT TEXT */
.frontC {
  text-align: center;
  color: white;
  background: rgba(0, 50, 200, 0.3);
}

Right. Keep calm and look carefully. The basic mechanics are pretty much the same as the previous example, we are just building on top.

1. Define the dimensions of the .demoC container.
2. Same old layering trick, except that we have one more .blurC “middle partial blur” layer. Also, take note of how the middle layer only covers a part of the bottom.
3. Set the background image, but take extra note of how this works –
   • .backC and .blurC have the same background image.
   • .backC is fully sharp, but we .blurC is blur.
   • We simply reposition .blurC to emulate that partial blur effect.
4. Text cosmetics.

 

 

 

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 as well. 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.

 

 

 

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