CSS 필터 생성기
사용자 지정 CSS 이미지 필터 만들기 및 시각화
Preview
CSS Code
필터 : 없음;
필터 컨트롤
0px
100%
100%
0%
0deg
0%
100%
100%
0%
인기 있는 필터
Vintage
Neon Glow
Polaroid
빈티지 필름
디지털 아트
CSS 필터를 사용하는 방법
CSS 필터란 무엇입니까?
CSS 필터를 사용하면 흐림 또는 색상 이동과 같은 그래픽 효과를 요소에 적용할 수 있습니다. 일반적으로 이미지, 배경 및 테두리에 사용됩니다.
필터는 외부 이미지 편집 도구 없이도 시각 효과를 만들거나, 이미지를 향상시키거나, 고유한 디자인 요소를 만드는 데 사용할 수 있습니다.
지원되는 CSS 필터 속성
-
blur()- 요소에 가우시안 흐림 효과를 적용합니다. -
brightness()- 요소의 밝기를 조정합니다. -
contrast()- 요소의 대비를 조정합니다. -
grayscale()- 요소를 회색 음영으로 변환합니다. -
hue-rotate()- 요소에 색조 회전을 적용합니다. -
invert()- 요소의 색상을 반전시킵니다. -
opacity()- 요소의 불투명도를 조정합니다. -
saturate()- 요소를 포화시키거나 채도를 낮춥니다. -
sepia()- 요소를 세피아로 변환합니다.
필터를 적용하는 방법
이 도구에서 생성된 CSS 코드를 사용하여 모든 HTML 요소에 필터를 적용할 수 있습니다. 방법은 다음과 같습니다.
1. 요소 선택
필터를 적용할 HTML 요소를 선택합니다. 이것은 이미지, 배경 또는 다른 요소일 수 있습니다.
2. 클래스 또는 ID 추가
요소에 아직 클래스나 ID가 없는 경우 하나를 추가하면 CSS로 더 쉽게 타겟팅할 수 있습니다.
3. 필터 적용
CSS 사용filter속성을 사용하여 생성된 필터를 적용할 수 있습니다.
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. 여러 필터 결합
여러 필터 함수를 공백으로 구분하여 하나씩 나열하여 결합할 수 있습니다.
filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);브라우저 호환성
CSS 필터는 Chrome, Firefox, Safari, Edge 및 Opera를 포함한 최신 브라우저에서 널리 지원됩니다. 그러나 Internet Explorer와 같은 이전 브라우저는 이를 지원하지 않습니다.
Chrome
Firefox
Safari
Edge
IE 11+ (partial)