CSS 필터속성은 HTML 요소를 화면에 표시하기 전에 요소의 이미지, 배경, 테두리 랜더링을 조정하여 요소를 화면에 랜더링할 때 흐림 또는 색상 변경 같은 효과를 줄 수 있습니다. (ie는 지원하지 않음)

필터를 이용한 사이트들… 

http://html5-demos.appspot.com/static/css/filters/index.html 

http://bennettfeely.com/filters-gallery/ 

http://bennettfeely.com/filters/ 

구문 : 

.filter {   filter: <filter-function> [<filter-function>]* | none } 필터함수를 여러 개 사용할 수 있으며 공백으로 구분합니다.

예: 

.filter {   filter: blur(30px); }   // 하나의 필터 함수 적용할 때

.filters {   filter: blur(30px) contrast(4); }    // 2개 이상 필터 함수 적용할 때

필터함수들: 

blur()      // filter: blur(<length>)    ⇒ filter: blur(15px);

brightness()  // filter: brightness([ <number> | <percentage> ]) ⇒ filter: brightness(5);

contrast()    // filter: contrast([ <number> | <percentage> ]) ⇒ filter : contrast(5);

drop-shadow()  // filter: drop-shadow(<length>{2,3} <color>?)  ⇒ filter: drop-shadow(15px 15px 5px rgba(5,5,5,0.7));     vs box-shadow, text-shadow ||  vs #ff0000 , blue  

grayscale()  // filter: grayscale([ <number> | <percentage> ]) ⇒ filter: grayscale(3);

hue-rotate() // filter: hue-rotate(<angle>)  ⇒ filter: hue-rotate(90deg);

invert()  // filter: invert([ <number> | <percentage> ])  ⇒ filter: invert(.8);

opacity()  // filter: opacity([ <number> | <percentage> ])  ⇒ filter: opacity(.3);

saturate()  // filter: saturate([ <number> | <percentage> ])  ⇒ filter: saturate(5);

sepia()  // filter: sepia([ <number> | <percentage> ])  ⇒ filter: sepia(3);

url()  // filter: url(<url>)  ⇒  -webkit-filter: url(#svg-blur);

브라우저 지원 

크롬18, 파이어폭스35, 사파리6, 엣지16, 익스x