CSS filter 생성기

사용 방법

1. 1

   기본값 또는 중립 값에서 시작

   페이지는 빈티지 예제로 열리고, 슬라이더 위 칩으로 다섯 가지 분위기를 더 불러올 수 있습니다. 깨끗하게 시작하려면 모든 슬라이더를 중립 값(blur 0, brightness 100, contrast 100, grayscale 0, hue 0, invert 0, saturate 100, sepia 0, opacity 100)으로 돌리세요. 결과는 filter: none;이 됩니다.

2. 2

   한 번에 한 값씩 조절

   슬라이더 하나만 움직이며 구분선으로 원본과 비교해 보세요. 범위는 blur 0~30px, brightness 0~200%, contrast 0~200%, grayscale 0~100%, hue -180~180도, invert 0~100%, saturate 0~300%, sepia 0~100%, opacity 0~100%입니다.

3. 3

   효과 조합

   밝기를 낮추고 대비를 올리는 식으로 두세 가지를 더해 보고, 각각이 아니라 조합의 결과를 판단하세요.

4. 4

   filter 줄 복사

   filter: ...;를 복사해 이미지나 요소의 규칙에 붙여 넣습니다. 중립 함수를 포함한 아홉 개를 모두 적고 싶을 때만 '모든 함수 출력'을 켜세요.

작동 원리

실제 예시

blur 4, brightness 110, contrast 120, grayscale 20, hue 12, invert 0, saturate 140, sepia 8, opacity 95

filter: blur(4px) brightness(110%) contrast(120%) grayscale(20%) hue-rotate(12deg) saturate(140%) sepia(8%) opacity(95%);

blur 0, brightness 100, contrast 100, grayscale 0, hue 0, invert 0, saturate 100, sepia 0, opacity 100

filter: none;

grayscale 100, 나머지는 중립

filter: grayscale(100%);

brightness 60, contrast 110, saturate 80, 나머지는 중립

filter: brightness(60%) contrast(110%) saturate(80%);

blur 31

Use values within the supported ranges

자주 하는 실수

• 배경 레이어가 아닌 컨테이너에 blur 적용

  카드에 filter: blur()를 주면 글자도 흐려집니다. 유리 효과 패널은 별도의 배경 요소를 흐리게 하거나, 직접 쓰는 CSS에서 패널에 backdrop-filter를 쓰세요.

• 운영 코드에 모든 함수 출력

  '모든 함수 출력'을 켜면 실제로 쓰는 함수 옆에 blur(0px), invert(0%)도 나옵니다. 아무것도 바꾸지 않으면서 군더더기와 약간의 처리 비용만 더하므로, 전체 틀이 필요한 경우가 아니라면 꺼 두세요.

• 투명 이미지에 invert

  invert()는 색 채널만 뒤집으므로 투명 배경의 검정 로고는 흰색이 되고 투명한 픽셀은 그대로 투명입니다. 다크 모드에는 유용하지만 사진에는 뜻밖의 결과가 나옵니다.

• 큰 영역에서 애니메이션되는 필터

  전체 화면 요소에서 큰 블러나 hue-rotate를 애니메이션하면 휴대폰에서 프레임이 떨어질 수 있습니다. 작은 영역에 짧은 전환을 쓰거나 이미지를 미리 가공하세요.

• filter 안의 opacity와 opacity 속성

  단독으로는 똑같이 보이지만 filter 안에서는 순서에 따라 단계로 실행됩니다. 단순한 페이드는 일반 opacity 속성이 더 명확하고 애니메이션 비용도 낮습니다.

자주 묻는 질문