CSS 필터 생성기

필터 함수

연결 순서가 중요합니다

filter: brightness(0.5) saturate(2)는 밝기를 먼저 적용한 다음 채도를 적용하며, 두 필터가 겹쳐서 작용합니다.

filter: saturate(2) brightness(0.5)는 채도를 먼저 적용합니다. 이미지가 어두워지기 전에 더 밝은 상태이므로 색의 채도가 더욱 뚜렷하게 나타납니다.

시각적 차이는 미묘하지만 분명히 존재합니다. 필터 체인이 기대한 대로 보이지 않을 때는 두 순서를 모두 시도해 보세요.

자주 쓰는 레시피

/* 빛바랜 사진 느낌 */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* 빈티지 / 빛바램 */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* 듀오톤 근사 */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* 히어로 이미지 어둡게 */
filter: brightness(0.6);

/* 비활성 상태 */
filter: grayscale(1) opacity(0.6);

/* 글래스 / 서리 낀 오버레이 */
filter: blur(12px) saturate(1.3);

서리 유리 효과를 위한 backdrop-filter

filter는 요소 자체에 적용되고, backdrop-filter는 반투명 요소의 뒤에 있는 것에 적용되어 iOS가 대중화한 서리 유리 효과를 만들어냅니다.

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

지원: 모든 최신 브라우저. Firefox는 103 버전부터 마침내 플래그 없이 지원합니다.

성능 참고 사항

• blur()는 모든 픽셀을 커널로 합성해야 하므로 가장 비용이 큰 필터입니다. 4K 히어로 이미지에 30px 흐림을 적용하면 실제로 프레임 저하가 발생합니다.
• grayscale, sepia, brightness 등은 픽셀 단위 색상 변환이라 가볍습니다.
• 최신 브라우저에서 필터는 GPU 가속을 받지만, blur() 애니메이션은 저사양 기기에서 여전히 끊깁니다.
• 애니메이션 전에 will-change: filter를 지정하는 것이 좋습니다.

filter: drop-shadow() 대 box-shadow

• box-shadow는 요소의 보더 박스를 따릅니다(border-radius를 준수합니다).
• filter: drop-shadow()는 요소의 불투명한 픽셀을 따르므로 clip-path 모양, PNG 투명도, SVG 경로의 윤곽을 그대로 따라갑니다.

잘라낸 이미지나 투명한 이미지의 그림자에는 drop-shadow를 사용하고, 일반 카드와 박스에는 더 빠른 box-shadow를 사용하세요.