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.

Blurred text and images can be created by simply applying the CSS blur filter. For example, <img src="IMAGE.jpg" style="filter: blur(10px);">

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

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

 

IMAGE BLUR

All right, let us now start with blurring images using CSS filters – Yes, that is pure CSS only.

 

EXAMPLE 1) BASIC BLUR

1A) THE DEMO

 

1B) HTML & CSS

1-image-blur.html
<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

Lorem ipsum dolor sit amet.

 

2B) THE HTML

2-blur-back.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

2-blur-back.html
/* (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

ALPACA SAYS
UVUVWEVWEVWE ONYETENYEVWE!

 

3B) THE HTML

3-part-blur.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

3-part-blur.html
/* (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.

 

 

TEXT BLUR

With that, let us now move forward into the cousin of blurred images – How to create blurred text.

 

4) BASIC TEXT BLUR

4A) THE DEMO

BLUR!?

BLUR.

 

4B) HTML & CSS

4-text-blur.html
<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

5-partial-blur.html
.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.

 

 

USEFUL BITS & LINKS

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

 

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.

 

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.

 

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.