CSS - Blurred Background

Published: 14 January 2018
on channel: zFunx Web Developement Ideas

41,610

377

There's a mistake in the video about 'translate' in '.blurred-bg-container .blur'. The correct calculation is given by : "- [cl - (cw/2)] % , -[ct - (ch/2)] %", not by "(100/cl) x (100-cw) %, (100/ct) x (100-ch) %"

This works for both mobile and desktop.
This won’t work in IE as CSS filters do not work in IE.

Code used [Updated on 16th Oct 2018] : https://codepen.io/zFunx/pen/jYpYmG

Read in detail : https://web.zfunx.xyz/blurred-backgro...

There's a simple way to achieve this effect : • Frosted Glass Effect CSS Tutorial . But that only works on desktop.

On this page of the site you can watch the video online CSS - Blurred Background with a duration of hours minute second in good quality, which was uploaded by the user zFunx Web Developement Ideas 14 January 2018, share the link with friends and acquaintances, this video has already been watched 41,610 times on youtube and it was liked by 377 viewers. Enjoy your viewing!

3,497