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
