[CSS]이미지에 포토샵 처럼 filter 씌우기

아래와 같이 다양한 필터를 적용할 수 있고, 하나에 여러개의 필터를 적용시키는 것도 가능하다 

 

.filter1{filter:blur(5px);}
.filter2{filter:brightness(0.4);}
.filter3{filter:contrast(200%)}
.filter4{filter:drop-shadow(16px 16px 20px blue);}
.filter5{filter:grayscale(50%)}
.filter6{filter:hue-rotate(90deg)}
.filter7{filter:invert(75%)}
.filter8{filter: opacity(25%)}
.filter9{filter: saturate(30%)}
.filter10{filter:sepia(60%)}
.filter11{filter: blur(4px) hue-rotate(90deg)}

 

각 필터에 대한 결과는 아래에서 확인해볼 수 있다.