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; }