🎛️ CSS filter 생성기 | 값 넣고 코드 복사

blur (흐림 반경 · 0 이면 적용 안 함)

brightness (100% 가 원본 · 상한 없음)

contrast (100% 가 원본 · 상한 없음)

saturate (100% 가 원본 · 상한 없음)

grayscale (0% 가 원본 · 최대 100%)

sepia (0% 가 원본 · 최대 100%)

invert (0% 가 원본 · 최대 100%)

hue-rotate (색상환 회전 · 0 이면 적용 안 함)

deg

opacity (100% 가 원본 · 최소 0%)

drop-shadow 함께 넣기

drop-shadow 가로 오프셋

drop-shadow 세로 오프셋

drop-shadow 번짐

drop-shadow 색

filter 함수를 한 줄로 쌓기

filter 는 요소 자신이 그려진 결과에 흐림·명도·채도 같은 효과를 차례로 입힙니다. 여러 함수를 공백으로 이어 적으면 왼쪽부터 순서대로 적용되므로, 같은 값이라도 순서가 다르면 결과가 달라집니다. 여기서는 기본값인 항목을 빼고 남은 함수만 순서대로 이어 붙입니다.

범위가 있는 함수와 없는 함수

grayscale·sepia·invert·opacity 는 0~100% 안에서만 뜻이 있어 그 범위를 넘기면 막고, brightness·contrast·saturate 는 상한이 없어 100% 를 넘겨도 그대로 둡니다. 음수는 어느 함수에서도 쓸 수 없습니다. 함수 이름과 인자 표기는 W3C 의 Filter Effects 명세를 따릅니다(2026년 10월 기준).

하지 않는 것

요소 뒤에 깔린 배경을 흐리는 backdrop-filter 는 만들지 않습니다. 그쪽은 속성이 달라 별도 도구가 맡습니다. SVG 필터를 불러 쓰는 url() 함수와 요소 자체에 적용하는 box-shadow 도 다루지 않습니다.

자주 묻는 질문

함수 순서가 결과에 영향을 주나요?

줍니다. 왼쪽부터 차례로 적용되므로 grayscale 을 먼저 넣으면 그 뒤의 hue-rotate 는 돌릴 색이 없어 효과가 사라집니다.

grayscale 값을 150% 로 적으면 어떻게 되나요?

100% 와 같은 결과입니다. 범위를 넘겨도 바뀌는 게 없어서 이 도구는 0~100% 안에서만 입력을 받습니다.

filter 와 backdrop-filter 는 어떻게 다른가요?

filter 는 요소 자신을, backdrop-filter 는 요소 뒤에 깔린 배경을 처리합니다. 속성이 달라 코드도 따로 적어야 합니다.

🎛️CSS filter 효과 코드 생성기

관련된 도구

CSS backdrop-filter 코드 생성기

CSS Flexbox 레이아웃 코드 생성기

filter 함수를 한 줄로 쌓기

범위가 있는 함수와 없는 함수

하지 않는 것

자주 묻는 질문

관련된 도구

CSS backdrop-filter 코드 생성기

CSS Flexbox 레이아웃 코드 생성기

filter 함수를 한 줄로 쌓기

범위가 있는 함수와 없는 함수

하지 않는 것

자주 묻는 질문

같은 카테고리 도구