filter

• filter ⇒ 다양한 그래픽 효과를 요소에 적용

• 적용하고 싶은 요소에 쓰면 됨

[filter 속성의 값들]

• blur(n) : 흐림 정도

• grayscale(퍼센트) : 흑백 처리 정도, 기본은 100%

• invert(퍼센트) : 색상 반전 정도, 기본은 100%

• drop-shadow(x y 흐림정도 색상) : 그림자 표시, 실제 속성보다 (x,y) 떨어진 곳까지 표시
• 컨테이너의 배경색이 없으면 아이템들에 그림자가 표시
• 있으면 컨테이너의 그림자 표시

• brightness(n) : 명도
• 0이면 그냥 검정

• contrast(퍼센트) : 대비, 100%기본값이고 그 이상을 지정할 수 있음

• opacity(퍼센트) : 투명도, 기본값 100%

• saturate(퍼센트) : 채도, 100%기본값이고 그 이상을 지정할 수 있음

• sepia(퍼센트) : 세피아톤 - 오래된 사진을 보는 듯한,, 기본값은 100%, 0이면 지정x

• hue-rotate(각도deg) : 하단 이미지의 각도로 색상을 지정

[backdrop-filter 속성]

• 자기 자신(and 자식들)에 필터 효과를 넣는 것이 아닌, 해당 범위 안에서 뒤에 있는 요소들을 필터 처리

• 값은 filter와 같음

• IE, firefox에서는 적용되지 않음

• 그라데이션 배경을 원한다면 ?
⇒ background-image 속성에 linear-gradient(시작 색상, 끝 색상)으로 지정