Live Preview
실시간 미리보기
Generated CSS
생성된 CSS
filter: none;
Adjust blur, brightness, contrast, saturation, hue and more with live sliders. The preview updates instantly — copy the generated CSS with one click.
블러, 밝기, 대비, 채도, 색조 등을 슬라이더로 실시간 조정하세요. 미리보기가 즉시 반영되며 생성된 CSS 코드를 한 번에 복사할 수 있습니다.
filter: none;
Drag any slider on the right panel. The preview image on the left updates instantly as you move it.
오른쪽 패널의 슬라이더를 드래그하면 왼쪽 미리보기 이미지가 즉시 변경됩니다.
Adjust multiple sliders at once — blur + sepia for a vintage look, grayscale + contrast for B&W drama, and more.
여러 슬라이더를 동시에 조정하세요. 블러+세피아로 빈티지, 그레이스케일+대비로 흑백 드라마 효과 등을 연출할 수 있습니다.
The Generated CSS panel below shows only the non-default values. Defaults are omitted to keep your code clean.
아래 CSS 출력 패널에는 기본값이 아닌 값만 표시됩니다. 기본값은 생략되어 코드가 깔끔하게 유지됩니다.
Click "Copy CSS" and paste the rule directly into your stylesheet or <style> block. Done.
"CSS 복사" 버튼을 클릭한 뒤 스타일시트나 <style> 블록에 바로 붙여넣으면 완료됩니다.
filter property applies visual effects to an element — like blur, brightness adjustment, grayscale conversion, and more — directly in the browser without any image editing. It works on images, videos, backgrounds, and any HTML element.
CSS filter 속성은 이미지 편집 없이 브라우저에서 직접 요소에 블러, 밝기 조정, 그레이스케일 변환 등 시각적 효과를 적용합니다. 이미지, 비디오, 배경, 모든 HTML 요소에 사용할 수 있습니다.
brightness(100%) and contrast(100%) have no visual effect). Only changed values are included to keep the generated CSS minimal and clean. If nothing is changed, it shows filter: none;.
기본값인 필터 함수(예: brightness(100%), contrast(100%))는 시각적 효과가 없으므로 생략됩니다. 변경된 값만 포함해 생성되는 CSS를 최소화하고 깔끔하게 유지합니다. 아무것도 변경하지 않으면 filter: none;이 표시됩니다.
filter property today.
CSS 필터는 Chrome, Firefox, Safari, Edge, Opera 등 모든 최신 브라우저에서 지원됩니다. 전 세계 브라우저 지원율은 96% 이상이며, 현재는 벤더 프리픽스 없이 표준 filter 속성을 사용하면 됩니다.
filter applies to the entire element including children. To filter only the background, use a pseudo-element (::before) with the background and apply filter to that pseudo-element instead. Alternatively, CSS backdrop-filter applies effects to the area behind an element.
네, 단 filter는 자식 요소를 포함한 전체 요소에 적용됩니다. 배경만 필터링하려면 ::before 가상 요소에 배경을 지정하고 그 가상 요소에 filter를 적용하세요. 또는 요소 뒤 영역에 효과를 주는 CSS backdrop-filter를 활용할 수도 있습니다.
blur) to large elements or animating them continuously can be expensive. For animations, prefer will-change: filter to hint the browser to promote the element to its own compositor layer.
CSS 필터는 최신 브라우저에서 GPU 가속이 적용되어 일반적으로 빠릅니다. 단, 큰 요소에 무거운 필터(특히 blur)를 적용하거나 연속 애니메이션에 사용하면 비용이 클 수 있습니다. 애니메이션에는 will-change: filter를 사용해 브라우저가 해당 요소를 별도의 컴포지터 레이어로 승격하도록 힌트를 주세요.