어떤 CSS 필터를 사용할 수 있나요?

blur, brightness, contrast, grayscale(흑백), hue-rotate(색조 0-360deg), invert(반전), opacity(투명도), saturate(채도), sepia를 지원합니다. 여러 필터를 하나의 규칙으로 조합할 수 있습니다.

CSS filter는 모든 브라우저에서 작동하나요?

네, 2016년경부터 모든 최신 브라우저에서 지원됩니다. Internet Explorer는 지원하지 않습니다. 이미지뿐 아니라 모든 HTML 요소에 적용할 수 있습니다.

filter는 요소 자체에 효과를 적용하고, backdrop-filter는 요소 뒤의 배경에 효과를 적용하여 유리 효과를 만듭니다.

네, transition과 @keyframes으로 완전히 애니메이션이 가능합니다. hue-rotate를 animate하면 무지개 색상 효과를 만들 수 있습니다. 대부분의 브라우저에서 GPU 가속으로 처리됩니다.

디스플레이 타입과 운영 체제에 따라 색상 렌더링이 다릅니다. 색상 정확도가 중요하면 실제 기기에서 테스트하세요. Safari iOS는 Chrome과 일부 필터를 다르게 렌더링합니다.

라이브 미리보기로 CSS 필터 효과를 만드세요. 블러, 밝기, 대비, 흑백, 색조 회전, 채도, 세피아 등을 조정하고 바로 사용 가능한 CSS를 복사하세요.

프리셋

블러0px

밝기100%

대비100%

흑백0%

색조 회전0deg

반전0%

불투명도100%

채도100%

세피아0%

미리보기 이미지 URL (선택사항)

CSS 출력

filter: none;

CSS filter 속성

CSS filter 속성은 요소에 블러, 색상 이동 등의 그래픽 효과를 적용합니다. 여러 필터를 조합할 수 있으며 왼쪽에서 오른쪽 순서로 적용됩니다.

라이브 미리보기로 CSS 필터 효과를 만드세요. 블러, 밝기, 대비, 흑백, 색조 회전, 채도, 세피아 등을 조정하고 바로 사용 가능한 CSS를 복사하세요.

1프리셋으로 시작하세요. Grayscale은 흑백, Vintage는 따뜻함과 낮은 대비, Dramatic은 강렬한 대비를 추가합니다. 프리셋은 출발점이며 이후 모든 슬라이더를 조정할 수 있습니다.
2개별 필터를 슬라이더로 미세 조정하세요. Brightness와 contrast를 함께 조정하면 전체적인 노출을 제어합니다. Saturate는 다른 속성 변경 없이 색상 강도를 높이거나 줄입니다.
3미리보기 이미지 URL 필드에 원하는 이미지 URL을 붙여넣으세요. 실제 스타일링할 콘텐츠에서 필터가 어떻게 보이는지 확인할 수 있습니다.
4결과가 마음에 들면 복사 버튼으로 CSS를 가져오세요. 스타일시트에 직접 붙여넣으세요. img 요소, background-image가 있는 div, 또는 모든 요소에 적용할 수 있습니다.

실시간 미리보기 — 새로 고침 없이 필터 변경을 실시간으로 확인
9가지 필터 컨트롤 — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia
빠른 프리셋 — Grayscale, Vintage, Dramatic, Cool, Warm 포함 9가지 원클릭 시작점
커스텀 이미지 URL — 데모 사진이 아닌 자신의 이미지에서 필터 미리보기