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
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
<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:
- First, we set the dimensions of the
.demoB
container. We can also use relative units if required (percentage or viewport). - Next, layer the background image and text. I.E. “Stack” the text on top of the background.
.demoB { position: relative; }
is required forposition: 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
.
- Set the background image, blur it with
filter: blur()
as usual. - Cosmetics for the text.
3) PARTIAL BLUR
3A) THE DEMO
UVUVWEVWEVWE ONYETENYEVWE!
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.
- Define the dimensions of the
.demoC
container. - 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. - 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.
- 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
<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.
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.
- 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
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!