도구 소개
CSS 필터 생성기는 흐림, 밝기, 대비, 회색조, 색조 회전, 반전, 불투명도, 채도, 세피아 효과를 조절합니다. 페이지에 내장된 시각 요소를 미리보기에 사용하므로 원격 이미지를 요청하지 않습니다.
사용 방법
- 슬라이더를 움직이거나 숫자를 입력하여 필터를 조절하세요.
- 색상, 가장자리, 불투명도의 실시간 변화를 확인하세요.
- 생성된 filter 선언을 복사하세요.
- ‘초기화’를 클릭하면 모든 기본값이 복원되고 filter: none이 출력됩니다.
사용 예제
- grayscale(100%)는 완전한 회색조 효과를 만듭니다.
- brightness(120%)는 밝기를 높이며 brightness(100%)는 원래 밝기를 유지합니다.
- blur(2px)는 가장자리를 흐리게 하고 opacity(50%)는 요소를 반투명하게 만듭니다.
filter: blur(2px) brightness(120%) contrast(110%) saturate(130%);
filter: none;작동 원리 및 CSS 설명
CSS filter는 렌더링된 요소에 선언 순서대로 시각 효과를 적용합니다. 기본값은 blur 0px, brightness 100%, contrast 100%, grayscale 0%, hue-rotate 0deg, invert 0%, opacity 100%, saturate 100%, sepia 0%입니다. 기본값인 항목은 생략하며 모든 값이 기본값이면 none을 출력합니다.
주요 용도
- 카드, 일러스트, 이미지의 필터 스타일을 비교합니다.
- 마우스 오버 상태와 테마 효과에 사용할 CSS를 준비합니다.
- 여러 filter 함수를 조합했을 때의 변화를 이해합니다.
개인정보 안내
모든 입력 처리, 계산, CSS 생성, 미리보기는 현재 브라우저에서 이루어집니다. 사용자 내용을 업로드하지 않으며 백엔드, 데이터베이스, 온라인 API, 외부 CDN을 사용하지 않습니다. 입력값은 자동 저장되지 않습니다.
FAQ
CSS filter란 무엇인가요?
브라우저의 시각 효과 속성으로 요소에 흐림, 밝기, 색상, 불투명도 등의 처리를 적용합니다.
brightness(100%)는 무엇을 뜻하나요?
원래 밝기를 유지한다는 뜻입니다. 100%보다 낮으면 어두워지고 높으면 밝아집니다.
blur()와 opacity()는 어떻게 사용하나요?
blur()는 0 이상의 길이로 흐림을 조절합니다. opacity()는 0~100%로 불투명도를 조절하며 100%는 완전히 불투명한 상태입니다.
CSS filter가 원본 이미지를 바꾸나요?
아니요. 브라우저에서 보이는 효과만 바꾸며 원본 이미지 파일을 저장하거나 수정하지 않습니다.
초기화하면 왜 filter: none이 출력되나요?
모든 설정이 효과 없는 기본값이면 none으로 동일한 상태를 표현할 수 있으므로 기본 함수를 하나씩 나열할 필요가 없습니다.