[CSS] filter 속성

filter 속성은 요소에 그래픽 효과를 주기 위한 속성이다.

 

 

/* SVG 필터를 가리키는 URL */
filter: url("filters.svg#filter-id");

/* <filter-function> 값 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* 다중 값 */
filter: contrast(175%) brightness(3%);

/* 필터 없음 */
filter: none;

/* 전역 값 */
filter: inherit;
filter: initial;
filter: unset;

(MDN에서 긁어온 코드)

 

blur() : 블러 효과를 주고 싶을 때

brightness() : 밝기 조절. 100% 또는 1이 원본 밝기이고 100%이나 1보다 커지면 밝아지고, 100%이나 1보다 값이 작아지면 어두워진다.

contrast() : 대비 조절. 조절값은 위와 똑같다.

drop-shadow() : 그림자 효과. drop-shadow(offset-x, offset-y, blur-radius,color)

gray-scale() : 흑백으로 변환. 100%이면 완전히 흑백, 0과 가까워질수록 원본과 같아짐

hue-rotate() : 색조 변환(색조 회전) 0deg~360deg사이 값

invert() : 색조 반전. 100%일 경우 완전 반전

opacity() : 투명값

saturate() : 채도 변경, 0%일경우 완전 무채색, 100%보다 커지면 원본 이미지보다 채도 높아짐

sepia() : 세피아 변경, 0%이 원본이미지.

---

참고링크: 🔗