Blurred Text & Images With Pure CSS – Simple Examples

By / Tips & Tutorials - HTML & CSS / January 28, 2021

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.

 

 

REAL QUICK SLIDES

Blurred Images & Text With Pure CSS

 

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.

 

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.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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.

 

IMAGE BLUR

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

 

BASIC BLUR

1a-basic-blur.html
<style>
.blur {
  filter: blur(10px);
}
</style>
<img src="alpaca.jpg" class="blur"/>

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

 

 

BLURRED BACKGROUND

1b-blur-back.html
<style>
/* SET BACKGROUND IMAGE */
#behind {
  background: url(alpaca.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(10px);
  /* RESIZE AS REQUIRED */
  width: 100vw;
  height: 100vh;
}

/* TEXT FOREGROUND */
#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#front {
  width: 300px;
  margin: 50vh auto 0 auto;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
}
</style>
 
<div id="behind"></div>
<div id="container">
  <div id="front">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

Yikes. A blurred background sure looks a lot more complicated, but let us walk through it part-by-part on how it’s done:

  • First, we set padding: 0 and margin: 0 on the <html> and <body> – This is to prevent ugly scroll bars when we create a full-sized background later.
  • Next, we create <div id="behind"> to hold the background image – The CSS for it should be pretty self-explanatory, we are merely setting a full-sized background image and blurring it.
  • For you guys who are wondering why we don’t directly apply the background image to the <body> – That is because the blur effect will apply to the entire page… Which is not what we want.
  • Moving on, we create <div id="container"> to be the container for the foreground – This is positioned absolute to the body and will “float” on top of the background image.
  • Finally, we add <div id="front"> to the container for the actual text itself… This is kind of a hassle, but an additional <div> here will make it much easier to center on the screen.

 

 

PARTIAL BLUR

1c-part-blur.html
<style>
/* CONTAINER */
#alpaca {
  position: relative;
  width: 600px;
  height: 348px;
}

/* BACKGROUND IMAGE */
#alpa-back, #alpa-blur {
  background: url('alpaca.jpg');
  width: 100%;
 }

 /* SHARED POSITIONING */
#alpa-blur, #alpa-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
}
 
/* BACKGROUND IMAGE - SHARP */
#alpa-back {
  height: 100%;
}
 
/* BACKGROUND IMAGE - BLURRED */
#alpa-blur {
  filter: blur(5px);
  /* 348px - 100px = 248px */
  background-position-y: -248px;
}
 
/* FOREGROUND TEXT */
#alpa-text {
  background: rgba(0, 50, 200, 0.3);
  text-align: center;
  color: white;
}
</style>
 
<div id="alpaca">
  <div id="alpa-back"></div>
  <div id="alpa-blur"></div>
  <div id="alpa-text">
    <h3>ALPACA SAYS</h3>
    <p>
      UVUVWEVWEVWE ONYETENYEVWE UGWEMUBWEM OSSAS!
    </p>
  </div>
</div>

A partial blur is a little tricker… Since there are literally no options in CSS to specify where to apply the filter. So here’s the trick in general – We create 2 background images, keep one sharp but the other blur.

  • <div id="alpaca"> serves as the container.
    • Inside this container are 3 <div>.
    • <div id="alpa-back"> and <div id="alpa-blur"> are the full background image and blurred image respectively.
    • <div id="alpa-front"> is the foreground text.
  • We start by tackling the #alpaca container. Nothing special here, it only needs to be the same width and height as the image.
  • Next, to deal with the background images.
    • #alpa-back and #alpa-blur will have the same background-image – The only difference is how they are sized and positioned.
    • #alpa-back is literally just set to width: 100% and height: 100%.
    • To deal with the partial blur – #alpa-blur is set to height: 100px and positioned at bottom: 0 of the #alpaca container instead… Captain Obvious, it also needs to be set to filter: blur().
  • Actually, the above will already achieve the partial blur effect. But to close it off nicely, we position another #alpa-text to add some caption to the whole mechanism.

 

EXTRA – OTHER 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… I shall leave a link to the full list of it in the extras section below.

 

 

TEXT BLUR

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

 

BASIC TEXT BLUR

2a-blur-basic.html
<style>
.blur {
  filter: blur(1px);
}
.blur-shade {
  color: transparent;
  text-shadow: 0 0 3px rgba(0,0,0,0.7);
}
</style>
 
<p class='blur'>BLUR!?</p>
<p class='blur-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.

 

PARTIAL TEXT BLUR

2b-partial-blur.html
<style>
.blurA {
  filter: blur(1px);
}
.blurB {
  filter: blur(2px);
}
.blurC {
  filter: blur(3px);
}
</style>
 
<p>
  Various
  <span class='blurA'>Shades</span>
  <span class='blurB'>Of</span>
  <span class='blurC'>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

These are all rendered by CSS on-the-fly after all. Just take note that some of the 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 will not understand and render all of these effects.

 

INFOGRAPHIC CHEAT SHEET

Blur Text & Image In Pure CSS (click to enlarge)

 

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 *