CSS filter 생성기

blur, brightness, contrast, grayscale 등 CSS filter 값을 미리 보며 생성합니다.

언제 사용하나요?

이미지 썸네일, 배경 레이어, 비활성 카드, 호버 효과에 블러·밝기·대비·채도·흑백 효과를 CSS로 적용해야 할 때 사용합니다. 여러 filter 함수를 조합하고 미리보기로 결과를 확인할 수 있습니다.

사용 방법

Blur·Brightness·Contrast 등을 슬라이더로 조정합니다.
미리보기로 결과를 확인합니다.
초기화 버튼으로 되돌릴 수 있습니다.
CSS 코드를 복사합니다.

입력값 안내

Blur(0~20px), Brightness(0~200%), Contrast(0~200%), Saturate(0~200%), Hue-Rotate(0~360deg), Opacity(0~100%), Sepia·Invert·Grayscale(0~100%) 값을 조정합니다.

계산·변환 기준

기본값과 다른 필터 함수만 포함해 filter: ... 속성으로 조합합니다. CSS filter는 함수 순서에 따라 최종 색감이 달라질 수 있습니다.

사용 예시

이미지 오버레이 - 다크모드 이미지 딤처리, 비활성 썸네일, 흐린 배경 레이어에 활용합니다.
호버 효과 실험 - hover 시 brightness, contrast, saturate 값을 바꾸는 이미지 인터랙션 초안을 만듭니다.
디자인 값 공유 - 생성된 filter 값을 CSS 코드, 디자인 문서, 리뷰 코멘트에 그대로 붙여 넣습니다.

예시

filter: blur(4px) brightness(80%) grayscale(50%)
blur 2px + brightness 110% → 배경 이미지를 은은하게 흐리고 밝게
grayscale(100%) contrast(120%) → 흑백 썸네일 강조

주의사항

생성된 CSS filter 속성은 참고용입니다. IE 11에서 지원하지 않으며 성능 집약적이므로 실제 환경에서 확인하세요.
입력 데이터는 브라우저에서만 처리되며 서버로 전송되지 않습니다.

계산·사용 가이드

CSS filter 조합

filter 속성은 blur(), brightness(), contrast(), grayscale(), saturate() 같은 함수를 공백으로 이어 씁니다. 여러 값을 조합하면 이미지 톤과 상태 표현을 빠르게 만들 수 있습니다.

이미지 상태 표현

비활성 이미지는 grayscale과 opacity를, hover 강조는 brightness나 contrast를 활용하는 식으로 상태별 시각 차이를 만들 수 있습니다.

성능 주의

blur와 drop-shadow 계열 효과는 넓은 영역이나 많은 이미지에 적용하면 렌더링 비용이 커질 수 있습니다. 목록 전체보다 필요한 요소에만 적용하는 것이 좋습니다.

전환 효과

filter 값을 transition과 함께 쓰면 이미지 hover나 카드 focus 상태가 부드럽게 바뀝니다. 기본 상태와 상호작용 상태의 filter 값을 따로 정해두면 구현이 쉽습니다.

자주 묻는 질문

여러 효과를 동시에 쓸 수 있나요?

네, 여러 필터 함수를 공백으로 이어서 적용합니다.

필터 효과를 미리 볼 수 있나요?

네. 슬라이더를 조절하면 미리보기 이미지에 필터가 실시간으로 적용됩니다.

어떤 필터를 지원하나요?

blur·brightness·contrast·grayscale·saturate 등 9가지 CSS filter를 조합해 적용할 수 있습니다.

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

blur처럼 무거운 필터를 넓은 영역에 쓰면 렌더링 부담이 커질 수 있으니 필요한 곳에만 적용하는 것이 좋습니다.

hover 효과에도 쓸 수 있나요?

네. 기본 상태와 hover 상태의 filter 값을 각각 정해 transition과 함께 적용하면 부드러운 이미지 효과를 만들 수 있습니다.

필터 순서가 중요한가요?

네. filter 함수는 앞에서부터 순서대로 적용되므로 brightness와 contrast, grayscale 조합은 순서에 따라 미묘하게 달라질 수 있습니다.