ProUtils

CSS 필터 생성기

밝기, 대비, 채도, 블러, 색상 회전 등 CSS filter 값을 미리 보며 생성합니다.

이 도구에 대해

여러 CSS filter 함수를 슬라이더로 조정하고 결과를 즉시 미리 볼 수 있습니다.

이미지 보정, 카드 hover 효과, 배경 이미지 톤 조정처럼 디자인 작업에서 자주 쓰는 값을 빠르게 만듭니다.

미리보기

결과

사용 방법

  1. 1

    필요한 값을 입력하거나 텍스트를 붙여넣습니다.

  2. 2

    옵션이나 단위를 원하는 방식으로 조정합니다.

  3. 3

    표시된 결과를 확인하고 필요한 곳에 복사해 사용합니다.

기능

즉시 결과

값을 입력하면 결과가 브라우저에서 바로 업데이트됩니다.

브라우저 처리

입력값은 서버로 업로드하지 않고 기기 안에서 처리됩니다.

간단한 입력

반복 사용에 맞춘 명확한 입력 필드와 출력값을 제공합니다.

무료 사용

가입이나 설치 없이 바로 사용할 수 있습니다.

주요 사용 사례

  • 이미지 위에 적용할 밝기와 대비 값을 찾습니다.
  • hover 상태나 비활성 상태에 쓸 blur, grayscale, opacity 값을 만듭니다.
  • CSS filter 코드를 복사해 컴포넌트 스타일에 바로 붙입니다.

관련 도구

개발자 도구