CSS 필터 생성기
슬라이더를 움직이면 미리 보기와 filter 코드가 함께 바뀌어요.
입력한 글과 파일은 서버로 보내지 않고 이 브라우저 안에서만 처리해요.
파일을 끌어다 놓거나 눌러서 고르세요
CSS 코드
사용 방법
- 예시 그림이 들어 있어요. 내 이미지를 쓰려면 아래 칸에 끌어다 놓으세요.
- 슬라이더를 움직이거나 프리셋을 고르면 바로 적용돼요. 기본값 그대로인 항목은 코드에서 빠져요.
- 「누르는 동안 원본」을 꾹 누르면 적용 전 모습과 비교할 수 있어요.
- CSS 코드를 복사해 쓰거나, 지원하는 브라우저에서는 「내려받기」로 필터를 입힌 PNG 를 저장하세요.
자주 묻는 질문
filter 함수 순서가 중요한가요?
네, 앞에서부터 차례로 적용돼서 순서가 바뀌면 결과도 달라져요. 이 도구는 항상 같은 순서로 코드를 만들어요.
drop-shadow 와 box-shadow 는 무엇이 다른가요?
box-shadow 는 요소의 네모난 상자에 그림자를 넣고, drop-shadow 는 투명한 부분을 뺀 실제 모양을 따라 그림자를 넣어요. 배경이 투명한 PNG 나 아이콘에 잘 맞아요.
내려받기 버튼이 안 보여요.
캔버스 필터를 지원하지 않는 브라우저(일부 사파리 등)에서는 숨겨요. 이때도 CSS 코드는 그대로 쓸 수 있어요.