HTML CSS

BLURRED IMAGES & TEXT WITH PURE CSS

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

BASIC CSS BLUR

01

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

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

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

BLURRED BACKGROUND (A)

02

BLURRED BACKGROUND IMAGE .back {   background: url(alpaca.jpg);   filter: blur(10px); }

BLURRED BACKGROUND (B)

03

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

<div class="demo">   <div class="back"></div>   <div class="blur"></div>   <div class="front">TEXT</div> </div>

PARTIAL BLUR (A)

04

PARTIAL BLUR (B)

05

LAYERING ORDER .demo { position: relative; } .back, .blur, .front { position: absolute; } .back { z-index: 1; } .blur { z-index: 2; } .front { z-index: 3; }

DIMENSIONS .demo { width: 600px; height: 400px; } .back {   top: 0; left: 0;   width: 100%; height: 100%; } .blurC, .frontC {   bottom: 0; left: 0; }   width: 100%; height: 100px;  }

PARTIAL BLUR (C)

06

BACKGROUND IMAGE .back, .blur {   background: url("alpaca.jpg");  } 400PX - 100PX = 300PX .blur {   filter: blur(5px);   background-position-y: -300px; }