HTML CSS

BLURRED IMAGES & TEXT

(a quick guide)

CSS BLUR FILTER .blur { filter: blur(5px); }

BASIC CSS BLUR

01

APPLY TO IMAGES <img src="img.jpg" class="blur">

CAN ALSO APPLY TO TEXT <p class="blur">TEXT</p>

<div class="wrap">   <div class="back"></div>   <div class="front">TEXT</div> </div>

BLURRED BACKGROUND (A)

02

FULLSCREEN COVER body { padding: 0; margin: 0; } .wrap { min-height: 100vh; } .front { overflow: auto; }

BLURRED BACKGROUND (B)

03

LAYERING .wrap { position: relative; } .back, .front {   position: absolute; top: 0; left: 0;   width: 100%; height: 100%; } .back { z-index: 1; } .front { z-index: 2; }

BACKGROUND IMAGE .back {   background: url(img.png);   background-size: cover;   filter: blur(5px); }