실시간 미리보기
생성된 CSS
filter: none;
블러, 밝기, 대비, 채도, 색조 등을 슬라이더로 실시간 조정하세요. 미리보기가 즉시 반영되며 생성된 CSS 코드를 한 번에 복사할 수 있습니다.
filter: none;
오른쪽 패널의 슬라이더를 드래그하면 왼쪽 미리보기 이미지가 즉시 변경됩니다.
여러 슬라이더를 동시에 조정하세요. 블러+세피아로 빈티지, 그레이스케일+대비로 흑백 드라마 효과 등을 연출할 수 있습니다.
아래 CSS 출력 패널에는 기본값이 아닌 값만 표시됩니다. 기본값은 생략되어 코드가 깔끔하게 유지됩니다.
"CSS 복사" 버튼을 클릭한 뒤 스타일시트나 <style> 블록에 바로 붙여넣으면 완료됩니다.
filter 속성은 이미지 편집 없이 브라우저에서 직접 요소에 블러, 밝기 조정, 그레이스케일 변환 등 시각적 효과를 적용합니다. 이미지, 비디오, 배경, 모든 HTML 요소에 사용할 수 있습니다.brightness(100%), contrast(100%))는 시각적 효과가 없으므로 생략됩니다. 변경된 값만 포함해 생성되는 CSS를 최소화하고 깔끔하게 유지합니다. 아무것도 변경하지 않으면 filter: none;이 표시됩니다.filter 속성을 사용하면 됩니다.filter는 자식 요소를 포함한 전체 요소에 적용됩니다. 배경만 필터링하려면 ::before 가상 요소에 배경을 지정하고 그 가상 요소에 filter를 적용하세요. 또는 요소 뒤 영역에 효과를 주는 CSS backdrop-filter를 활용할 수도 있습니다.blur)를 적용하거나 연속 애니메이션에 사용하면 비용이 클 수 있습니다. 애니메이션에는 will-change: filter를 사용해 브라우저가 해당 요소를 별도의 컴포지터 레이어로 승격하도록 힌트를 주세요.