Blurred Background

blurred background
We will clip the blurred element with the help of overflow:hidden;. This works for both mobile and desktop.

blurred background

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*/
}

background

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;}

background with zero margin

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.

content box

Set its position inside the container
.blurred-bg-container .content{
	/*..*/
	position:absolute;
	top:50%;
	left:50%;
}

content with top:50% and 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%);
}

content at center

Set text

Set a div inside the content
<div class="content">
	<div class="text">
		<h1>Lorem ipsum dolor sit amet </h1>
	</div>
</div>

content with text

Remove the default margin of h1 :
body,.blurred-bg-container .content h1{margin:0;}

content with text

Set the padding :
.blurred-bg-container .text{
	padding:16px;
}

content with text

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;
}

content with background and text

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*/
}

content with background

As you can see, that parent’s width is 100vw (ofcourse), so now :
.blurred-bg-container .blur{
	/*..*/
	width:100vw;
}

content with background

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;
}

content with background

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%);
}

content with background

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*/
}

background

Now the background of blur completely over the blurred-bg-container. Make the background blurry :
.blurred-bg-container .blur{
	/*..*/
	filter:blur(20px);
}

content with blurred background

Clip the blur inside content :
.blurred-bg-container .content{
	/*..*/
	overflow:hidden;
}

content with blurred background

Where’s our text? It’s under the blur. We have to lower the stack position :
.blurred-bg-container .blur{
	/*..*/
	z-index:-1;
}

content with blurred background and text

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);
}

content with blurred background and text

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*/
}

blurred background

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.

content with blurred background and text

This won’t work in IE as CSS filters do not work in IE. Useful links

Leave a Reply

Your email address will not be published. Required fields are marked *