6XC

CSS 필터 생성기

blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia, invert를 실시간 미리보기로 섞어보세요.

조회수 1,021회

6XC

filter 속성이란

filter는 사진, 동영상, 심지어 레이아웃 전체까지 모든 요소에 이미지 편집 효과를 적용합니다. 함수들은 하나의 선언 안에서 연결되며, filter: brightness(110%) contrast(120%) saturate(130%)는 화사한 "인스타그램" 느낌을 주고, grayscale(100%)는 고전적인 흑백 스타일이며, hue-rotate는 새 이미지 없이 색조만 바꿉니다.

자주 묻는 질문

filter가 성능에 영향을 주나요?

대부분의 필터는 GPU 가속을 받아 몇 개 요소에 쓰는 정도는 문제없습니다. 가장 부담이 큰 것은 blur입니다 — 특히 모바일에서는 큰 영역에 반경을 작게 유지하세요.

filter와 backdrop-filter의 차이는 무엇인가요?

filter는 요소 자체와 그 내용에 효과를 적용합니다. backdrop-filter는 요소 뒤에 보이는 부분에 효과를 적용합니다 — 글래스모피즘이 사용하는 방식입니다.

비슷한 도구

CSS 그라데이션 생성기 실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요. 생성하기 CSS 박스 그림자 생성기 오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요. 생성하기 CSS 모서리 둥글기 생성기 각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요. 생성하기 CSS 텍스트 그림자 생성기 오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요. 생성하기