CSS 백그라운드 필터 생성기

blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia의 아홉 가지 필터 함수 슬라이더를 드래그하여 backdrop-filter CSS를 실시간으로 만듭니다. 출력은 backdrop-filter와 -webkit-backdrop-filter를 모두 내보내서 최신 브라우저 전체에서 효과가 작동하도록 하며, 사용자 정의 가능한 배경 위에 글래스 카드를 렌더링하여 조정하면서 결과를 볼 수 있습니다.

1. (선택) 프리셋(Frosted Glass, Dark Glass, Vintage, Inverted)을 클릭하여 엄선된 룩에서 시작합니다. 2. Controls 패널의 슬라이더를 드래그합니다. 각 필터는 기본값과 다를 때만 생성된 CSS에 나타납니다(예: brightness/contrast/saturate/opacity 기본값은 100, blur 기본값은 0). 3. Background 필드에 유효한 CSS background 값(그라데이션, 이미지 url, 색상)을 편집하여 다른 아트 위에서 필터를 테스트합니다. 4. Copy를 클릭하여 backdrop-filter 및 -webkit-backdrop-filter 선언을 모두 복사합니다.

blur 0–50px; brightness 0–200%(기본 100); contrast 0–200%(기본 100); grayscale 0–100%; hue-rotate 0–360deg; invert 0–100%; opacity 0–100%(기본 100); saturate 0–200%(기본 100); sepia 0–100%. Reset은 모든 슬라이더를 기본값으로 복원합니다. 중립값인 필터는 출력에서 생략되며, 모두 중립값이면 출력은 backdrop-filter: none입니다.