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

Create a container div :

Set its height and 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 :

Create a content div which will float inside our container :

Set its width and height :

We have set background for its visibility, and box-shadow and border-radius for its beauty.

Set its position inside the container

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 :

Set a div inside the content

Remove the default margin of h1 :

Set the padding :

Add another div inside content :

Now we will inherit background from the first parent blurred-bg-container to that div :

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 :

As you can see, that parent’s width is 100vw (ofcourse), so now :

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% :

Align blur inside content

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 :

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%):

Now the background of blur completely over the blurred-bg-container. Make the background blurry :

Clip the blur inside content :

Where’s our text? It’s under the blur. We have to lower the stack position :

What we can do so that text is more readable? We can set a background to the text :

You can increase that background to fill the content

Whole code :

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