CSS 필터 생성기

출력 형식과 함수 순서

출력은 .element 클래스에 filter 속성을 설정합니다. .element를 원하는 선택자로 바꾸면 이미지, div, canvas, video, 가상 요소 등에 쓸 수 있습니다. 함수는 항상 슬라이더 순서(blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia)로 적히고 미리보기도 같은 문자열을 씁니다. 브라우저는 적힌 순서대로 하나씩 적용하며 앞 함수의 결과가 다음 함수의 입력이 됩니다(Filter Effects Level 1 §5). 다른 순서가 필요하면 복사한 뒤 직접 바꾸세요.

예시: 고대비 화면을 filter로 흉내 내지 않기

저시력 사용자를 위한 고대비 화면을 만들려고 페이지 전체에 대비를 올리는 경우가 있습니다. ‘대비’를 150으로 올리면 도구는 다음을 출력합니다.

.element {
  filter: contrast(150%);
}

이 선언을 body에 붙이면 두 가지 문제가 생깁니다. 첫째, filter가 none이 아닌 요소는 절대 위치와 고정 위치 자손의 컨테이닝 블록이 되고, 예외는 문서의 루트 요소뿐입니다(Filter Effects Level 1 §5: “unless the element it applies to is a document root element in the current browsing context”). body는 루트가 아니므로 상단 고정 메뉴 같은 position: fixed 요소가 뷰포트가 아니라 body를 기준으로 배치됩니다. 둘째, filter는 그려진 화면만 바꾸고 계산된 CSS 색 값은 바꾸지 않습니다.

KRDS(krds-uiux 1.1.0)는 고대비 화면을 filter로 만들지 않습니다. common.css와 component.css에는 filter 선언이 없고, [data-krds-mode=high-contrast] 선택자 아래에서 —krds-high-contrast-color-… 토큰으로 색을 바꿉니다. 이처럼 색 토큰을 따로 두면 위의 두 문제가 생기지 않습니다.

예시: 품절 상품 썸네일

쇼핑몰 목록에서 품절 상품을 흑백으로 조금 밝게 보이게 하려면 ‘회색조’를 100, ‘밝기’를 110으로 둡니다.

.element {
  filter: brightness(110%) grayscale(100%);
}

슬라이더를 어떤 순서로 움직였든 brightness가 grayscale보다 앞에 적힙니다. 이 규칙은 썸네일 img에만 붙이고 상품 카드 전체에는 붙이지 마세요. 필터는 자손까지 함께 그리므로 카드에 붙이면 ‘품절’ 표시와 가격도 흑백이 됩니다. 품절 여부는 색만이 아니라 글자로도 알려야 합니다.

제한 사항

• 조정 범위: 흐림 020px(0.1px 간격), 밝기·대비·채도 0200%, 색조 회전 0360deg, 나머지 0100%. 명세는 더 큰 값도 허용합니다. 밝기·대비·채도에는 상한이 없고, 회색조·반전·불투명도·세피아는 100%를 넘으면 100%로 처리됩니다. 필요하면 복사한 CSS를 직접 고치세요.
• drop-shadow()와 SVG 필터를 참조하는 url()은 만들지 않습니다. 유리 패널 뒤쪽을 흐리게 하려면 backdrop-filter를 쓰고, filter: blur()는 글자를 포함한 요소 자체를 흐리게 합니다.
• 미리보기 이미지는 5 MB(5,242,880바이트)까지입니다. 상한을 넘는 파일, 이미지가 아닌 파일, 이 브라우저가 디코딩할 수 없는 파일(0바이트 파일, 확장자만 .png로 바꾼 텍스트, 브라우저가 지원하지 않는 HEIC 등)은 불러오지 않고 상태 줄에 이유를 표시하며, 미리보기는 원래 이미지를 유지합니다. 브라우저가 이미지 형식으로 알려 주거나 파일 이름이 흔한 이미지 확장자로 끝날 때만 이미지로 보므로, 확장자가 없는 이미지 파일도 불러오지 않습니다.
• 9개 값은 이 브라우저에 저장되고 이미지는 저장되지 않습니다.

주요 활용 사례

CSS 필터는 이미지 호버 효과(평소에는 회색조, 호버 시 컬러), 다크 모드에서 스크린숏 조정(반전 + 색조 회전), 로딩 중 자리 표시 이미지(회색조 + 밝기), 세피아·고대비 같은 사진 스타일에 널리 쓰입니다. 요소 뒤쪽을 흐리게 하는 표현에는 backdrop-filter를 씁니다.