CSS 필터 플레이그라운드
9개의 CSS 필터 함수를 슬라이더로 조정하면 미리보기가 실시간 갱신됩니다(자신의 이미지를 드롭하거나 내장 그라디언트 블록 사용). 6개 프리셋(Cool·Warm·B&W·Sepia·Vintage·Inverted)으로 빠르게 시작. 출력은 바로 붙여넣을 수 있는 CSS `filter` 규칙과 Tailwind 임의값 클래스.
—
미리보기
AZ Tools
CSS
filter: none;
Tailwind
filter-none
사용법
- 슬라이더를 조정하거나 프리셋을 클릭해 시작.
- 필요하면 이미지를 드롭해 실제 콘텐츠에서 미리보기.
- CSS 규칙이나 Tailwind 클래스를 복사.
자주 묻는 질문
- Blur 값이 작은데 왜 별로 안 보여요?
- CSS blur는 가우시안 반지름 — 약 10px 이상부터 눈에 띕니다. 슬라이더 상한은 20px, 그 이상의 흐림은 제품 UI에선 잘 안 씁니다.
- 'invert'는 색에 어떤 영향?
- 각 채널을 255 − 값으로 교체. 다크모드 트릭에 쓸 만하지만 사진까지 반전되니 보통은 아이콘·텍스트에만 적용합니다.
- 왜 기본값 슬라이더는 출력에 안 나오나요?
- CSS filter 규칙엔 실제로 바뀐 함수만 포함됩니다 (예: brightness(100%)는 기본이라 생략).
- Tailwind 임의값 클래스?
- Tailwind에 기본 단축 클래스(blur-md, contrast-125)가 있지만 모든 값은 없어요. 임의값 `filter-[…]` 클래스로 어떤 필터든 유틸리티처럼 사용 가능합니다 — 프로토타이핑에 좋음.
관련 도구
이미지 블러
Gaussian·박스·모션 블러를 브라우저에서 바로 적용. 반지름 0-64px 조정 가능, 동등한 CSS filter 문자열도 함께 제공.
이미지 0 0
CSS Flexbox 플레이그라운드
flex-direction·justify-content·align-items·gap을 클릭으로 조정 — CSS 또는 Tailwind 클래스 복사.
개발 0 0
CSS Grid 플레이그라운드
grid-template-columns / rows·gap·아이템 정렬을 시각적으로 — CSS를 바로 복사.
개발 0 0
이미지 듀오톤 효과
어떤 이미지든 2색 듀오톤 효과 적용 — 섀도우 컬러·하이라이트 컬러 선택, 미드포인트·콘트라스트 조정, 결과 다운로드. Spotify 스타일 커버 2클릭에.
이미지 0 0
CSS clip-path 빌더 (원, 타원, 다각형, Inset)
CSS `clip-path` 속성의 시각 빌더 — 도형 선택 (원, 타원, inset, 다각형), 슬라이더나 미리보기 클릭으로 다각형 점 추가, 붙여넣기 바로 가능한 CSS 선언 복사. 10가지 도형 프리셋 (삼각형, 육각형, 별, 화살표, 말풍선, 십자 등) 포함.
색상 0 0
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
색상 0 0