ZeroTool Workbench

CSS 필터 생성기

CSS filter 효과를 시각적으로 생성. blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia를 슬라이더로 조정. 커스텀 이미지 업로드로 실시간 미리보기. 무료 온라인 도구.

100% 클라이언트 사이드 데이터가 브라우저 밖으로 나가지 않습니다 무료 · 회원가입 불필요
미리보기
preview
px
%
%
%
deg
%
%
%
%
생성된 CSS

관련 도구

CSS Clip-Path 생성기 CSS clip-path 도형을 시각적으로 생성. 핸들을 드래그하여 폴리곤·원·타원·인셋을 만들고 육각형·별 등 5가지 프리셋 제공. 실시간 미리보기로 즉시 CSS 복사. 무료 온라인 도구. CSS 그라디언트 생성기 CSS 그라디언트를 시각적으로 생성. 선형, 방사형, 원뿔형 세 가지 유형. 각도, 위치, 최대 6개의 색상 정지점을 실시간 미리보기로 조정. 무료 온라인 도구. Glassmorphism CSS 생성기 글래스모피즘 CSS 효과를 시각적으로 생성. 블러, 채도, 배경 투명도, 테두리, 모서리 반경, 그림자를 실시간 미리보기로 조정. backdrop-filter + -webkit-backdrop-filter 지원. 100% 클라이언트 처리. CSS 박스 섀도우 생성기 CSS box-shadow 값을 시각적으로 생성. 수평/수직 오프셋, 블러, 스프레드, 불투명도, 색상, 인셋 모드를 슬라이더로 조정. 실시간 미리보기와 원클릭 복사 지원. UUID 생성기 즉시 v4 UUID 생성 — 단건 또는 일괄 생성. 색상 변환기 HEX, RGB, HSL 형식 간 색상 변환. 실시간 색상 미리보기.

사용 방법

  1. 흐림·밝기·대비·회색조·색조 회전·반전·불투명도·채도·세피아 9개의 슬라이더 중 하나를 조정하면 미리보기 이미지에 실시간으로 효과가 반영됩니다.
  2. 이미지 업로드를 클릭하여 기본 미리보기 이미지를 원하는 이미지(JPEG, PNG, WebP, SVG 등 5MB 이하)로 교체할 수 있습니다. 이미지는 브라우저에서 완전히 처리되며 서버에 업로드되지 않습니다.
  3. 각 슬라이더의 초기화 버튼으로 해당 필터만 기본값으로 되돌릴 수 있습니다. 모두 초기화로 한 번에 모든 슬라이더를 리셋합니다.
  4. 복사 버튼으로 생성된 CSS를 복사합니다. 기본값과 다른 함수만 출력되며, 모두 기본값이면 filter: none;이 출력됩니다.

생성된 CSS 이해하기

출력은 .element 클래스에 filter 속성을 설정합니다. .element를 원하는 선택자로 교체하여 이미지·div·canvas·video·가상 요소 등 모든 HTML 요소에 적용할 수 있습니다. 필터 함수는 순서대로 평가되므로 blur(2px) brightness(120%)는 먼저 흐리게 한 뒤 밝기를 높이는 순서로 처리됩니다.

주요 활용 사례

CSS 필터는 이미지 호버 효과(기본 상태에서 회색조, 호버 시 컬러), 다크 모드 이미지 조정(반전 + 색조 회전), 로딩 스켈레톤(회색조 + 밝기), 유리 카드 배경(흐림 적용), 세피아·고대비 등의 사진 스타일링에 널리 사용됩니다. 필터는 GPU에서 처리되므로 대형 이미지나 복잡한 레이아웃에서도 우수한 성능을 발휘합니다.

FAQ

CSS filter 속성이란 무엇인가요?

CSS filter 속성은 흐림, 색상 이동, 밝기 조정 같은 그래픽 효과를 요소에 적용합니다. blur()·brightness()·contrast()·grayscale()·hue-rotate()·invert()·opacity()·saturate()·sepia()를 공백으로 구분하여 지정할 수 있습니다. 필터는 왼쪽에서 오른쪽 순서로 합성되며 대부분의 브라우저에서 하드웨어 가속이 지원됩니다.

기본값인 필터 함수가 출력에서 생략되는 이유는 무엇인가요?

brightness(100%)나 blur(0px)처럼 기본값의 필터 함수는 시각적 효과가 없고 불필요한 코드만 늘립니다. 이 생성기는 기본값과 다른 함수만 출력하여 CSS를 최소화합니다. 모든 슬라이더가 기본값일 때는 filter: none;을 출력하여 상속된 필터를 명시적으로 제거합니다.

페이지의 이미지에 필터를 적용하는 방법은?

생성된 CSS를 복사하여 대상 요소의 규칙에 filter 속성을 추가하세요. 예: img { filter: blur(4px) brightness(120%); }. 이미지 외에도 div, section 같은 비이미지 요소에도 적용할 수 있으며, 효과는 요소와 모든 하위 요소를 단일 합성 레이어로 렌더링합니다.

CSS 필터에 애니메이션을 적용할 수 있나요?

네. CSS 필터는 transition과 keyframe 애니메이션을 지원합니다. 요소에 transition: filter 0.3s ease;를 설정하고 hover, focus 또는 JavaScript로 filter 값을 변경하면 됩니다. 시작과 끝 상태에 동일한 필터 함수가 있으면 9개 함수 모두 부드럽게 보간됩니다.

filter: opacity()와 CSS opacity 속성의 차이는 무엇인가요?

단일 요소에 대한 시각적 결과는 동일합니다. 주요 차이는 CSS opacity 속성이 새로운 스태킹 컨텍스트를 생성하여 요소와 모든 자손을 그룹으로 처리하는 반면, filter: opacity()는 필터 체인의 일부로 다른 필터와 순서대로 합성된다는 점입니다. 단일 속성 값에서 여러 효과를 조합할 때 유용합니다.