CSS & HTML to Blur Entire Web Page with Color

CSS & HTML to Blur Entire Web Page with Color - [1] To control the amount of blurring of the webpage ... [2] To control the transparent color effect of the blurring ...

Customizing the Body Blur Effect

To control the amount of blurring of the webpage, edit #bodyblurouter{backdrop-filter:blur(1.5px) by lowering the number to lessen the blur or raising the number to increase the blurring of the webpage.

The semi transparent color gray can be removed by changing #bodyblurinner{background:gray; to #bodyblurinner{background:transparent; or change it to a different color to suite your tastes.

To change the opacity/transparency of the color, alter filter:alpha(opacity=20); opacity:0.2by raising or lowering the numbers of filter:alpha(opacity=30); opacity:0.3; to suite your tastes. Numbers of filter:alpha(opacity=30) can go from 0 - 10 and the numbers of opacity:0.3; can go from 0.0 - 1.0.

Customizing the White Div on Top

The left:50%;top:50%; positions the left and top edge of the white div in the middle of the page. translate:-50% -50%; is required to move the white div back and up half of the white divs width and height. These numbers can be adjusted as you wish. Both left, top, translate numbers can be changed to change the position of the white div on the page

<style> #bodyblurouter{ backdrop-filter:blur(1.5px); bottom:0;left:0;right:0;top:0; position:fixed; height:100%; width:100%; z-index:99; } #bodyblurinner{ background:#777; height:100%; filter:alpha(opacity=30); opacity:0.3; position:relative; width:100%; } #visiblediv{ background:#fff; height:200px; left:50%; position:absolute; translate:-50% -50%; top:50%; width:250px; z-index:999999; } </style> <div class="" id="bodyblurouter"> <!-- creates the color effect --> <div id="bodyblurinner"></div> <!-- the white div where you put your content --> <div id="visiblediv"> <!-- html code goes here --> </div> </div> <!-- #bodyblurouter -->