CSS 필터 실습장

CSS Filter Playground

샘플에 블러·밝기·채도·색조·그림자 필터를 겹쳐 보고 CSS를 만듭니다.

CSS 필터 함수를 샘플 위에 겹쳐 쌓고 선언을 만들어 줍니다. 미리보기는 브라우저의 `filter` 속성이 직접 그린 것이라, 보이는 것이 근사치가 아니라 정의상 그 CSS가 하는 일 그 자체입니다. 여기서 하나 더 주는 것은 같은 효과의 `feColorMatrix`입니다. 흐림과 그림자를 뺀 나머지 함수는 전부 RGBA에서 아핀 변환이라, 여덟 개짜리 사슬도 숫자 스무 개로 접힙니다.

🔒 브라우저 안에서만 처리cssfiltereffects

미리보기

브라우저의 filter 속성이 직접 그린 것이라, 이것이 아래 CSS가 하는 일의 근사치가 아니라 그 자체입니다.

CSS

filter: none;

필터

brightness1모든 채널에 곱하는 선형 연산입니다. 0이면 검정, 1이면 그대로입니다.contrast10.5를 중심으로 한 기울기입니다. 양끝을 넘어간 값은 잘리고, 잘린 값은 되돌릴 수 없습니다.saturate1saturate(0)은 grayscale(1)과 정확히 같습니다. 명세가 같은 행렬로 정의했습니다.grayscale0감마가 걸린 값에 Rec. 709 계수를 그대로 적용합니다. 이 어긋남은 명세에 있는 것이고, 그대로 재현해야 브라우저와 결과가 맞습니다.sepia0고정된 행렬 쪽으로 보간합니다. sepia(1)은 흰색을 rgb(255,255,239)로 만드는데, 파랑 행의 합이 0.937이라서 그냥 어두워지는 대신 따뜻하게 읽힙니다.hue-rotate0deg비선형 RGB 입방체의 휘도 축을 도는 회전이지 지각적인 색상 회전이 아닙니다. hue-rotate(180deg)를 걸어도 보색이 나오지 않습니다.invert0이것도 아핀입니다. v → v(1−2a) + a.opacity1알파만 건드립니다.blur0px공간 연산이라 행렬로 접히지 않고, GPU 시간을 실제로 잡아먹는 것도 이것입니다.

drop-shadow

사용 방법

무엇 위에서 볼지 고릅니다
단색 견본은 특정 색이 어떻게 되는지, 그라디언트는 회색을 포함한 넓은 범위에서 어떻게 되는지, 직접 올린 이미지는 실제로 필터를 걸 대상이 어떻게 되는지를 보여 줍니다. 최종 판단은 마지막 것으로 하세요.
필요한 함수를 움직입니다
기본값 그대로 둔 것은 결과에서 아예 빠지므로, 실제로 바꾼 만큼만 CSS가 나옵니다. 순서는 결과에 영향을 주고 목록에 적힌 순서를 따릅니다.
그림자가 필요하면 마지막에 켭니다
값 하나가 아니라 숫자 셋과 색을 받기 때문에, 그리고 알파 채널을 따라가기 때문에 따로 있습니다. 투명한 PNG의 상자가 아니라 실제 모양을 따라 그립니다.
CSS를 가져가거나 행렬을 가져갑니다
CSS는 스타일시트용입니다. `feColorMatrix`는 SVG 필터나 셰이더, 또는 행렬 곱 한 번이면 될 일을 여덟 번 돌리기 아까운 파이프라인용입니다.

자주 묻는 질문

왜 행렬에 흐림이 없나요?

흐림은 공간 연산이기 때문입니다. 흐려진 픽셀은 이웃 픽셀에 의존하는데 색 행렬은 한 번에 픽셀 하나만 봅니다. 그림자도 마찬가지입니다. 접히지 못한 함수는 패널이 이름을 밝히고 별도 단계로 남겨 둡니다. 조용히 빼지 않습니다.

hue-rotate(180deg)를 걸었는데 보색이 안 나옵니다

원래 안 나옵니다. 이 함수는 비선형 RGB 입방체의 휘도 축을 도는 회전이고 명세가 고정된 행렬로 정의한 것입니다. 지각적인 색상 회전이 아니고 그렇게 설계되지도 않았습니다. 진짜 보색이 필요하면 색상 변환기나 팔레트 생성에서 OKLCH 색상을 돌리세요.

grayscale(1)이 올바른 휘도 계수를 쓰나요?

명세가 요구하는 계수를 씁니다. Rec. 709를 감마가 걸린 값에 그대로 적용합니다. 엄밀히 말하면 비선형 값에 휘도 가중치를 적용하는 것은 틀렸고, 제대로 된 탈채도는 먼저 선형화합니다. 그런데 명세가 이렇게 하라고 했고 브라우저도 그렇게 하므로, 여기서도 바로잡지 않고 그 어긋남을 그대로 재현합니다. 브라우저와 일치하는 것이 목적이기 때문입니다.

backdrop-filter도 되나요?

함수는 같으므로 복사한 값을 거기에도 그대로 쓸 수 있습니다. 다른 것은 대상입니다. `backdrop-filter`는 요소 자신이 아니라 요소 뒤에 그려진 것에 필터를 겁니다. 그래서 여기 미리보기로는 실제 콘텐츠 위에 얹은 반투명 판이 어떻게 보일지 알 수 없습니다. 페이지에 붙여넣고 직접 보세요.