CSS filter() 생성기
슬라이더로 blur·brightness·drop-shadow 등 CSS filter() 값을 실시간 미리보기와 함께 만들고 코드를 복사합니다.
px
%
%
%
%
%
%
deg
filter: none;사용 방법
- 1원하는 필터의 슬라이더를 조절합니다.
- 2미리보기에서 결과를 바로 확인합니다.
- 3아래 코드를 복사해 CSS의 filter 속성에 붙여넣습니다.
자주 묻는 질문
blur(흐림)·brightness(밝기)·contrast(대비)·grayscale(흑백)·hue-rotate(색상 회전)·invert(반전)·saturate(채도)·sepia(세피아)·drop-shadow(그림자)까지 아홉 가지 효과를 이미지나 요소에 바로 적용할 수 있습니다. 여러 개를 공백으로 이어 붙이면 동시에 적용됩니다.
brightness·contrast·saturate는 100%가 "원래 그대로"인 기본값이기 때문입니다. grayscale·invert·sepia처럼 0%가 기본값인 함수와 반대라서, 이 셋을 0%로 낮추면 밝기·대비·채도가 완전히 사라집니다.
비슷하지만 다릅니다. drop-shadow(오프셋X 오프셋Y 흐림 색)는 요소의 투명하지 않은 실제 모양을 따라 그림자를 만들고, spread(퍼짐)와 inset(안쪽 그림자)이 없습니다. box-shadow는 항상 사각형(테두리 상자) 모양으로 그림자가 생기고 퍼짐·인셋을 지원합니다.
CSS에서 값을 생략하면 어차피 기본값으로 처리되므로, 효과가 없는 필터를 코드에 넣지 않아 더 읽기 쉽게 했습니다. 예를 들어 brightness를 건드리지 않았다면 brightness(100%)를 굳이 적지 않습니다.
알아두면 좋은 점
- MDN "filter CSS property"·"<filter-function> CSS type" 문서를 2026년 9월 5일에 WebSearch로 교차 확인했습니다.
- CSS 스펙에 정의된 함수를 그대로 조합하는 생성기라 별도의 수치 검증이 필요하지 않습니다.
- 오래된 브라우저(구형 Safari 등)는 -webkit- 접두사가 필요할 수 있습니다. 최신 브라우저는 접두사 없이 지원합니다.
함께 보면 좋은 도구
박스 섀도우 생성오프셋·흐림·퍼짐·색상을 조절해 box-shadow CSS 코드를 만들고 미리보기로 바로 확인합니다.혼합 모드CSS mix-blend-mode와 포토샵 레이어 모드 16가지의 결과 색을 계산합니다.gitignore 판정.gitignore 규칙과 경로를 넣으면 그 파일이 무시되는지, 어느 줄이 마지막으로 이겼는지 알려줍니다.울프람 규칙규칙 번호 0~255를 8비트로 풀어 세 칸 이웃에 대응시키고 세대를 쌓아 무늬를 그립니다.2-SAT「둘 중 하나는 참」인 조건을 여럿 넣으면 참·거짓 배정이 가능한지 판정하고 배정을 하나 찾아 줍니다.
마지막 검증: 2026년 9월 5일 · 결과는 참고용 추정치입니다.