CSS 도구/필터 효과 생성기
필터 효과 생성기
실시간 미리보기로 CSS 필터를 적용하고 결합하세요
미리보기
필터 효과
0px
100%
100%
0%
0deg
0%
100%
100%
0%
프리셋
CSS 코드
Loading...CSS 필터 효과 가이드
요소에 시각 효과를 적용하는 방법을 알아보세요
CSS 필터란?
CSS 필터는 블러, 색상 변환, 그림자와 같은 그래픽 효과를 요소에 적용할 수 있게 해줍니다. 필터는 이미지 조작에 주로 사용되지만 모든 요소에 적용됩니다. 복잡한 시각 효과를 위해 여러 필터를 조합할 수 있으며, GPU 가속으로 부드러운 성능을 제공합니다.
사용 방법
- 개별 필터 슬라이더를 조정하여 효과 수정
- 복잡한 결과를 위해 여러 필터 조합
- 이미지를 업로드하여 실시간으로 필터 적용 확인
- 빠른 스타일링을 위해 프리셋 사용 후 CSS 복사
전문가 팁
- 블러와 밝기를 함께 사용하면 서리 유리 효과 생성
- 회색조와 세피아를 조합하면 빈티지 사진 느낌 연출
- 불규칙한 모양에는 box-shadow보다 drop-shadow가 더 효과적
브라우저 지원
CSS 필터는 Chrome, Firefox, Safari, Edge를 포함한 모든 최신 브라우저에서 지원됩니다. filter 속성은 좋은 호환성을 가지고 있지만, 일부 구형 브라우저에서는 -webkit- 접두사가 필요할 수 있습니다.
자주 묻는 질문
CSS 필터와 SVG 필터의 차이점은 무엇인가요?
CSS 필터는 간단한 문법으로 blur, brightness 등의 효과를 쉽게 적용할 수 있습니다. SVG 필터는 더 복잡하고 세밀한 효과를 만들 수 있지만 설정이 복잡합니다. CSS 필터는 GPU 가속을 받아 성능이 좋으며, 대부분의 일반적인 효과에 충분합니다.
여러 필터를 동시에 적용할 수 있나요?
네, 공백으로 구분하여 여러 필터를 하나의 filter 속성에 선언할 수 있습니다. 예: 'filter: blur(2px) brightness(1.2) contrast(1.1);'. 필터는 선언된 순서대로 적용되므로 순서에 따라 결과가 달라질 수 있습니다.
backdrop-filter와 filter의 차이는 무엇인가요?
filter는 요소 자체에 효과를 적용하고, backdrop-filter는 요소 뒤에 있는 콘텐츠에 효과를 적용합니다. backdrop-filter는 서리 유리, 흐린 배경 오버레이 같은 효과에 사용됩니다. backdrop-filter는 요소가 반투명해야 효과가 보입니다.
필터가 성능에 영향을 미치나요?
CSS 필터는 GPU에서 처리되어 대체로 성능이 좋지만, blur와 같은 일부 필터는 큰 요소에서 성능 저하를 일으킬 수 있습니다. 스크롤이나 애니메이션 중에 필터를 변경하는 것은 피하고, will-change 속성을 사용하여 최적화할 수 있습니다.
필터로 이미지를 완전히 흑백으로 만들 수 있나요?
네, grayscale(100%)를 사용하면 이미지가 완전히 흑백이 됩니다. 더 드라마틱한 효과를 원하면 contrast를 함께 조정하세요. sepia 필터와 조합하면 빈티지 느낌의 흑백 효과도 만들 수 있습니다.