CSS 필터 생성기
CSS filter 속성을 생성하여 이미지에 블러, 밝기, 대비, 흑백 등 효과를 적용하세요. 실시간 미리보기 포함.
filter: none;CSS 필터 생성기 소개
이 도구는 CSS filter 속성을 생성하여 이미지에 다양한 시각적 효과를 적용합니다. 블러, 밝기, 대비, 흑백, 색조 회전 등을 지원하며 실시간 미리보기를 제공합니다.
기능
- 블러, 밝기, 대비, 흑백 필터
- 실시간 미리보기
- 즉각적인 CSS 코드 생성
- 미리 설정된 필터 효과
- 미세 조정 슬라이더
- 한 번의 클릭으로 코드 복사
Frequently Asked Questions
What is the CSS filter property?
The CSS filter property applies graphical effects like blur, brightness, or color shifting to an element. It uses filter functions such as blur(px), brightness(%), contrast(%), grayscale(%), hue-rotate(deg), invert(%), opacity(%), saturate(%), and sepia(%). Multiple filters can be combined in a single filter declaration.
Can I use multiple filters at once?
Yes. The CSS filter property supports multiple space-separated filter functions. For example: filter: blur(5px) brightness(120%) saturate(150%);. Each function is applied in order, creating combined effects. This tool lets you adjust each function independently and see the combined result in real time.
What is the difference between filter and backdrop-filter?
filter applies effects to the element itself (including its content and children). backdrop-filter applies effects to the area behind the element, creating frosted glass effects. This generator produces standard filter CSS. For backdrop-filter, simply change the property name in the generated code.
Will the generated CSS work in all browsers?
Yes. The generated filter syntax follows the CSS Filters standard and works in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. No vendor prefixes are needed for current browser versions.