CSS Filter Generator
CSS filter 속성을 시각적으로 생성하고 미리보기할 수 있습니다.
Filter 설정
각 필터 속성을 조정하세요
프리셋
미리 정의된 필터 스타일을 사용해보세요
미리보기
기본 이미지에 생성된 필터 효과를 확인하세요
원본
필터 적용
Filter Preview
생성된 CSS
filter: none;CSS Filter 함수 설명
시각적 효과
- • blur(px): 흐림 효과
- • brightness(%): 밝기 조정
- • contrast(%): 대비 조정
- • opacity(%): 투명도 조정
색상 효과
- • grayscale(%): 흑백 효과
- • hue-rotate(deg): 색조 회전
- • invert(%): 색상 반전
- • saturate(%): 채도 조정
- • sepia(%): 세피아 효과
사용 팁
- • 여러 필터를 공백으로 구분하여 조합 가능
- • 이미지뿐만 아니라 모든 HTML 요소에 적용 가능
- • CSS 애니메이션과 함께 사용하여 동적 효과 생성
- • backdrop-filter로 배경에만 필터 적용 가능