CSS 필터 플레이그라운드

사용법

1. 슬라이더를 조정하거나 프리셋을 클릭해 시작.
2. 필요하면 이미지를 드롭해 실제 콘텐츠에서 미리보기.
3. CSS 규칙이나 Tailwind 클래스를 복사.

자주 묻는 질문

Blur 값이 작은데 왜 별로 안 보여요?

CSS blur는 가우시안 반지름 — 약 10px 이상부터 눈에 띕니다. 슬라이더 상한은 20px, 그 이상의 흐림은 제품 UI에선 잘 안 씁니다.

'invert'는 색에 어떤 영향?

각 채널을 255 − 값으로 교체. 다크모드 트릭에 쓸 만하지만 사진까지 반전되니 보통은 아이콘·텍스트에만 적용합니다.

왜 기본값 슬라이더는 출력에 안 나오나요?

CSS filter 규칙엔 실제로 바뀐 함수만 포함됩니다 (예: brightness(100%)는 기본이라 생략).

Tailwind 임의값 클래스?

Tailwind에 기본 단축 클래스(blur-md, contrast-125)가 있지만 모든 값은 없어요. 임의값 `filter-[…]` 클래스로 어떤 필터든 유틸리티처럼 사용 가능합니다 — 프로토타이핑에 좋음.

관련 도구