CSS 필터 플레이그라운드
blur·brightness·contrast·hue·sepia·invert 등 9개 필터 시각 조합 — CSS 또는 Tailwind 임의값으로 복사.
filter: none;
filter-none
사용법
- 슬라이더를 조정하거나 프리셋을 클릭해 시작.
- 필요하면 이미지를 드롭해 실제 콘텐츠에서 미리보기.
- CSS 규칙이나 Tailwind 클래스를 복사.
자세한 설명
펼치기접기
CSS 필터 체인을 시각적으로 만들어 보세요. blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, opacity를 실시간 미리보기 위에서 조절하고 완성된 선언을 복사할 수 있습니다. 필터를 실제로 내보내기 전에 알아 둘 것이 두 가지 있습니다. 필터는 쓰인 순서대로 적용되고 순서가 결과를 바꿉니다. 흐리게 한 다음 밝게 한 그림은 밝게 한 다음 흐리게 한 그림과 다릅니다. 그리고 none이 아닌 필터가 걸리면 그 요소는 고정 위치와 절대 위치 자손의 컨테이닝 블록이 됩니다. 누군가 감싸는 요소에 필터를 추가한 뒤로 position: fixed 헤더가 갑자기 같이 스크롤되어 사라지는 현상은 대개 이것으로 설명됩니다. 모든 처리는 페이지 안에서 이루어지고 미리보기에 쓰는 이미지도 기기를 벗어나지 않습니다.
자주 묻는 질문
Blur 값이 작은데 왜 별로 안 보여요?
CSS blur는 가우시안 반지름 — 약 10px 이상부터 눈에 띕니다. 슬라이더 상한은 20px, 그 이상의 흐림은 제품 UI에선 잘 안 씁니다.
'invert'는 색에 어떤 영향?
각 채널을 255 − 값으로 교체. 다크모드 트릭에 쓸 만하지만 사진까지 반전되니 보통은 아이콘·텍스트에만 적용합니다.
왜 기본값 슬라이더는 출력에 안 나오나요?
CSS filter 규칙엔 실제로 바뀐 함수만 포함됩니다 (예: brightness(100%)는 기본이라 생략).
Tailwind 임의값 클래스?
Tailwind에 기본 단축 클래스(blur-md, contrast-125)가 있지만 모든 값은 없어요. 임의값 filter-[…] 클래스로 어떤 필터든 유틸리티처럼 사용 가능합니다 — 프로토타이핑에 좋음.
관련 도구
이미지 블러
Gaussian·박스·모션 블러를 브라우저에서 바로 적용. 반지름 0-64px 조정 가능, 동등한 CSS filter 문자열도 함께 제공.
이미지
CSS Flexbox 플레이그라운드
flex-direction·justify-content·align-items·gap을 클릭으로 조정 — CSS 또는 Tailwind 클래스 복사.
개발
CSS Grid 플레이그라운드
grid-template-columns / rows·gap·아이템 정렬을 시각적으로 — CSS를 바로 복사.
개발
이미지 듀오톤 효과
어떤 이미지든 2색 듀오톤 효과 적용 — 섀도우 컬러·하이라이트 컬러 선택, 미드포인트·콘트라스트 조정, 결과 다운로드. Spotify 스타일 커버 2클릭에.
이미지
CSS clip-path 빌더 (원, 타원, 다각형, Inset)
CSS clip-path 속성의 시각 빌더 — 도형 선택 (원, 타원, inset, 다각형), 슬라이더나 미리보기 클릭으로 다각형 점 추가, 붙여넣기 바로 가능한 CSS 선언 복사. 10가지 도형 프리셋 (삼각형, 육각형, 별, 화살표, 말풍선, 십자 등) 포함.
색상·CSS
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
색상·CSS