
We will clip the blurred element with the help of overflow:hidden;. This works for both mobile and desktop.
Create our container
Create a container div :
<div class="blurred-bg-container"> </div>
Set its height and background :
.blurred-bg-container{ background:url(https://web.opendrive.com/api/v1/download/file.json/NTlfMTU4NTk3MjJf?inline=1); background-size:cover; height:100vh;/*It will cover whole BODY*/ }
You can download the image from here https://pixabay.com/en/new-year-s-eve-leipzig-fireworks-1953253/. There’s white margin around the div because body has some margin by default. You can remove that as follows :
body{margin:0;}
Create our content box
Create a content div which will float inside our container :
<div class="blurred-bg-container"> <div class="content"> </div> </div>
Set its width and height :
.blurred-bg-container .content{ height:40%; width:50%; box-shadow:0 0 32px rgba(0,0,0,0.5); border-radius:8px; background:#fff; }
We have set background for its visibility, and box-shadow and border-radius for its beauty.
Set its position inside the container
.blurred-bg-container .content{ /*..*/ position:absolute; top:50%; left:50%; }
position:absolute; is used to position an element freely inside its parent. You can’t use top and left properties without position:absolute; . Now shift the element such that point A and point B (center of the element) coincide each other :
.blurred-bg-container .content{ /*..*/ transform:translate(-50%,-50%); }
Set text
Set a div inside the content
<div class="content"> <div class="text"> <h1>Lorem ipsum dolor sit amet </h1> </div> </div>
Remove the default margin of h1 :
body,.blurred-bg-container .content h1{margin:0;}
Set the padding :
.blurred-bg-container .text{ padding:16px; }
Create blurred div
Add another div inside content :
<div class="content"> <!-- .. --> <div class="blur"> </div> </div>
Now we will inherit background from the first parent blurred-bg-container to that div :
.blurred-bg-container .content{ /*..*/ background:inherit; } .blurred-bg-container .blur{ background:inherit; }
Here content is inheriting background from its parent blurred-bg-container and blur is inheriting background from content. Now we have to align blur such that it will align with the background of blurred-bg-container. As you can see this background is smaller than that parent’s background, so we have to set its dimensions to match that parent’s dimension. Let set its height first :
.blurred-bg-container .blur{ /*..*/ height:100vh; border: 1px solid #fff;/*for its visibility*/ }
As you can see, that parent’s width is 100vw (ofcourse), so now :
.blurred-bg-container .blur{ /*..*/ width:100vw; }
In case parent’s width isn’t known : If you set width to 100%, blur will have the same width of content. But content is 50% of blurred-bg-container (in width), means you have to multiply blur‘s width by 2 as two 50% makes 100%, i.e. blur‘s width is now 200% :
.blurred-bg-container .blur{ /*..*/ width:200%; }
Align blur inside content
.blurred-bg-container .blur{ /*..*/ position:absolute; top:0; left:0; }
Point A is the center of blurred-bg-container and B is the center of blur and we have to do something to make them coincide each other. There are two shiftings applied horizontally to content : left:50% and transform:translate(-50%,-50%). left:50% means content is shifted right by length equals to 50% of the width of blurred-bg-container. And transform:translate(-50%,-50%) means content is shifted left (as there’s minus sign) by 50% of its own width, i.e. 50% of 50% = 25%. So the total space is 25% (50% – 25%) in the left of content. So we have to shift blur 25% of the width of blurred-bg-container towards left :
.blurred-bg-container .blur{ /*..*/ transform: translateX(-25%); }
Similarly, we have shifted it downwards by 50% (by top:50%), and shifted upwards by 20% by using transform:translate(-50%,-50%) (50% of its height = 20%). So we will shift it upwards by 30% (50% – 20%):
.blurred-bg-container .blur{ background:inherit; height:100vh; /*border: 1px solid #fff;*/ /*remove this*/ width:100vw; position:absolute; top:0; left:0; /*transform: translateX(-25%);*/ /*remove this also*/ transform: translate(-25%,-30%);/*Note this*/ }
Now the background of blur completely over the blurred-bg-container. Make the background blurry :
.blurred-bg-container .blur{ /*..*/ filter:blur(20px); }
Clip the blur inside content :
.blurred-bg-container .content{ /*..*/ overflow:hidden; }
Where’s our text? It’s under the blur. We have to lower the stack position :
.blurred-bg-container .blur{ /*..*/ z-index:-1; }
Increasing text readability
What we can do so that text is more readable? We can set a background to the text :
.blurred-bg-container .text{ /*..*/ background:rgba(255,255,255,0.3); }
You can increase that background to fill the content
.blurred-bg-container .text{ /*..*/ height:100%; box-sizing:border-box;/*so that padding is included in height*/ }
Whole code :
<div class="blurred-bg-container"> <div class="content"> <div class="text"> <h1>Lorem ipsum dolor sit amet </h1> </div> <div class="blur"> </div> </div> </div>
body,.blurred-bg-container .content h1{margin:0;} .blurred-bg-container{ background:url(https://web.opendrive.com/api/v1/download/file.json/NTlfMTU4NTk3MjJf?inline=1); background-size:cover; height:100vh;/*= h*/ } .blurred-bg-container .content{ height:40%;/*= ch*/ width:50%;/*= cw*/ box-shadow:0 0 32px rgba(0,0,0,0.5); border-radius:8px; background:inherit; position:absolute; top:50%;/*= ct*/ left:50%;/*= cl*/ transform:translate(-50%,-50%); overflow:hidden; } .blurred-bg-container .text{ padding:16px; background:rgba(255,255,255,0.3); height:100%; box-sizing:border-box;/*so that padding is included in height*/ } .blurred-bg-container .blur{ background:inherit; height:100vh;/*h*/ width:100vw; position:absolute; top:0; left:0; transform: translate(-25%,-30%);/* - [cl - cw/2] % , -[ct - ch/2] % */ filter:blur(20px); z-index:-1; }
Another example
body,.blurred-bg-container .content h1{margin:0;} .blurred-bg-container{ background:url(https://web.opendrive.com/api/v1/download/file.json/NTlfMTMzMTgyNzlf?inline=1); height:100vh;/* =h */ background-size:cover; } .blurred-bg-container .content{ background:inherit; width:60%;/* =cw */ height:40%;/* =ch */ border-radius:8px; box-shadow:0 0 32px rgba(0,0,0,0.5); position:absolute; top:50%;/* =ct */ left:40%;/* =cl */ transform:translate(-50%,-50%); overflow:hidden; } .blurred-bg-container .text{ padding:16px; background:rgba(255,255,255,0.3); height:100%; box-sizing:border-box;/* so that padding is included in height */ } .blurred-bg-container .blur{ background:inherit; height:100vh;/* h */ width:166.667%;/* (100/cw) x 100% */ position:absolute; left:0; top:0; transform:translate(-10%,-30%);/* (100/cl) x (100-cw) %, (100/ct) x (100-ch) % */ filter:blur(20px); z-index:-1; }
Code is also available at https://codepen.io/zFunx/pen/jYpYmG.
This won’t work in IE as CSS filters do not work in IE. Useful links