CSS는 엘리먼트에 필터를 적용할 수 있습니다. 

기본적인 필터의 종류는 아래와 같습니다.

blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, opacity, drop-shadow

blur

html:

<div id="blur">

<h3>blur()</h3>

<img src="이미지주소">

<input type="range" step="1" min="0" max="10">

</div>

css:

#gallery div {

width: 200px;

float: left;

margin: 0 40px 20px 0;

padding: 15px;

text-align: center;

transition: background 0.5s ease;

}

js:

$('#blur input').onchange = function() {

var img = $('#blur img');

img.style.webkitFilter = 'blur(' + this.value + 'px' + ')';

var heading = $('#blur h3');

heading.textContent = 'blur(' + this.value + 'px)';

};

// Set init val

$('#blur input').value = 2;

$('#blur input').onchange();

더 자세한 내용은 링크1을 참조바랍니다.