로컬 CSS filter 생성기

실시간 미리보기로 CSS filter를 만드세요

로컬 샘플에 blur·색상·투명도 효과를 조정하고 깔끔한 filter CSS 선언을 복사하세요.

* 모든 처리는 브라우저에서 진행됩니다. 이미지는 업로드되지 않습니다.

Blur (px)밝기 (%)대비 (%)그레이스케일 (%)색상 회전 (도)반전 (%)채도 (%)세피아 (%)불투명도 (%)

CSS 준비 완료

filter: blur(4px) brightness(110%) contrast(120%) grayscale(20%) hue-rotate(12deg) invert(0%) saturate(140%) sepia(8%) opacity(95%);

FilterBox

QUICK GUIDE

filter 함수는 순서대로 적용됩니다

Each function changes the result produced by the functions before it.

Brightness and contrast start at 100%; color effects start at 0%.

Blur softens edges, while opacity controls how much of the sample shows through.

The preview uses CSS filter directly, so the copied declaration behaves the same in your page.

FAQ

Can I use this on any element?

The filter property applies graphical effects to images, text, backgrounds, borders, and other elements.

Why does order matter?

A filter list is applied from left to right. Changing the order can change the final color and contrast.

Why is the sample local?

A built-in shape keeps the tool private and fast. Paste the generated declaration onto your own image or component.