CSS Filter 플레이그라운드
슬라이더를 움직이면 미리보기가 즉시 갱신됩니다. 본인 이미지를 업로드하거나 기본 샘플로 바로 확인하세요.
사용 방법
"샘플" 또는 본인 이미지를 업로드해 미리보기를 정합니다. 텍스트 필터 효과도 동시에 확인할 수 있습니다.
9개 슬라이더(blur·brightness·contrast·grayscale·hue-rotate·saturate·sepia·invert·opacity)를 각각 조절. 각 필터에 "리셋" 버튼이 있어 기본값으로 빠르게 되돌릴 수 있습니다.
결과 filter CSS를 한 번에 복사. 기본값(no-op)인 필터는 자동으로 코드에서 제외됩니다.
자주 묻는 질문
CSS filter는 무엇에 쓰나요?
이미지·박스에 블러, 흑백, 색조 회전 등 시각 효과를 적용할 때 사용합니다. 호버 효과, 다크모드, 비활성 상태 표시 같은 UI 디테일에 유용합니다.
여러 필터를 동시에 적용할 수 있나요?
네. CSS filter는 공백으로 구분해 여러 함수를 동시에 적용할 수 있습니다(예: filter: blur(2px) grayscale(50%)). 본 도구는 모든 슬라이더를 한 코드로 출력합니다.
backdrop-filter와 다른가요?
filter는 요소 자체에, backdrop-filter는 요소 "뒤"의 배경에 적용됩니다. 글래스모피즘 같은 반투명 효과는 backdrop-filter를 씁니다(본 도구는 filter만 다룸).
모바일에서도 잘 동작하나요?
네. CSS filter는 모든 최신 브라우저(iOS Safari, Android Chrome 포함)에서 지원됩니다. blur 같은 무거운 필터는 큰 요소에서 성능 저하가 있을 수 있습니다.
데이터가 서버에 전송되나요?
아닙니다. 업로드한 이미지는 브라우저 내 미리보기 용도로만 쓰이고, 만들어진 CSS도 외부로 전송되지 않습니다.
