CSS 필터 생성기
blur · brightness · contrast · grayscale · sepia · saturate · hue-rotate · invert · opacity 9가지 CSS 필터를 조합하고, 건드리지 않은 함수는 출력에서 뺍니다.
CSS 필터 생성기
실시간 미리보기
결과
filter: none;filter: none;
이 CSS 필터 생성기가 하는 일
슬라이더를 움직여 자주 쓰이는 9가지 필터 함수로 CSS filter 값을 만들고, 그 뒤에 drop-shadow()도 더할 수 있습니다. 픽셀 단위의 blur(), 퍼센트 단위의 brightness()·contrast()·saturate(), 퍼센트 단위의 grayscale()·sepia()·invert()·opacity(), 그리고 각도 단위의 hue-rotate()입니다. ‘프리셋에서 시작’에서 빈티지나 네온 같은 효과를 고르면 모든 슬라이더가 그 값으로 맞춰지고, 거기서부터 다듬을 수 있습니다. 미리보기 상자가 색상 있는 콘텐츠에 적용된 효과를 실시간으로 보여주고, ‘미리보기 뒤 배경’에서 이 페이지 그대로·흰색·검은색·투명 확인용 체크무늬·직접 고른 색 중 하나를 깔 수 있어 invert()·opacity()·그림자를 실제로 놓일 배경 위에서 판단할 수 있으며(복사되는 CSS는 바뀌지 않습니다), filter: blur(2px) brightness(120%);처럼 바로 붙여넣을 수 있는 선언을 만들어 한 번의 클릭으로 복사할 수 있습니다.
기본값은 생략한 깔끔한 출력
실제로 바꾼 함수만 출력됩니다. 중립값 그대로인 항목 — blur·grayscale·hue-rotate·invert의 0, brightness·contrast·saturate·opacity의 100% — 은 생략되어 결과가 짧고 읽기 쉽게 유지됩니다. 모든 슬라이더가 중립값이면 값은 그냥 none이 되며, 이는 스타일시트나 인라인 style 속성에 바로 넣을 수 있는 유효한 filter 값입니다.
자주 묻는 질문
어떤 CSS 필터 함수를 지원하나요?
9가지입니다. blur(px), brightness(%), contrast(%), grayscale(%), sepia(%), saturate(%), hue-rotate(deg), invert(%), opacity(%)를 자유롭게 조합하면 이 순서대로 하나의 filter 값이 만들어집니다.
왜 일부 함수가 출력에서 빠지나요?
중립값 상태의 함수는 코드를 깔끔하게 유지하기 위해 생략됩니다. brightness·contrast·saturate·opacity는 100%, blur·grayscale·hue-rotate·invert는 0이 중립값이며, 아무것도 바꾸지 않으면 값은 none이 됩니다.
내 이미지에 필터를 적용해 보거나 그림자를 넣을 수 있나요?
네. 기기에서 사진을 불러오면 거기에 필터를 적용해 보여 주고, 원본을 옆에 나란히 둘 수도 있습니다. 슬라이더 뒤에 drop-shadow 조절도 있으며, box-shadow와 달리 투명한 이미지의 모양을 따라 그림자가 생깁니다.
미리 만든 효과에서 시작하거나 밝기를 더 세게 올릴 수 있나요?
네. ‘프리셋에서 시작’에서 빈티지, 네온, 야간 투시경 같은 효과를 고르면 모든 슬라이더가 그 효과의 값으로 맞춰지고, 그림자(drop-shadow) 설정은 그대로 둡니다. 슬라이더가 그 값과 같은 동안에는 목록에 효과 이름이 남고, 하나라도 움직이면 ‘선택…’으로 돌아갑니다. 밝기·대비·채도 슬라이더는 중립값보다 한참 위까지 올라가, 네온처럼 채도를 슬라이더 끝까지 올리는 강한 효과도 담을 수 있습니다. 건드리지 않은 함수는 여전히 코드에서 빠집니다.
CSS filter 속성은 어떤 브라우저에서 동작하나요?
크롬, 엣지, 파이어폭스, 사파리 등 지금 쓰이는 모든 브라우저가 데스크톱과 휴대폰 모두에서 접두사 없는 filter 속성과 이 페이지가 쓰는 모든 함수, drop-shadow()를 지원합니다. 둘 다 2016년에 나온 크롬 53과 사파리 9.1보다 오래된 버전만 -webkit-filter 접두사가 필요했습니다. 인터넷 익스플로러는 지원한 적이 없고, IE의 옛 filter 속성은 이름만 같은 전혀 다른 기능입니다.
미리보기 뒤의 배경을 바꿀 수 있나요?
네. 비교 체크박스 옆의 ‘미리보기 뒤 배경’에서 이 페이지 그대로, 흰색, 검은색, 투명 확인용 체크무늬, 직접 고른 색 중 하나를 필터가 적용된 틀 뒤에 — 비교할 때는 두 틀 모두의 뒤에 — 깔 수 있어, invert()·opacity()·그림자를 실제로 놓일 배경 위에서 판단할 수 있습니다. 바뀌는 것은 미리보기뿐이고 복사되는 CSS는 그대로입니다.