🌁 backdrop-filter 생성기

backdrop-filter blur (뒤 배경 흐림 반경)

saturate (100% 가 원본)

brightness (100% 가 원본)

contrast (100% 가 원본)

요소 자신의 배경색

요소 배경 불투명도 (100% 면 뒤가 안 보임)

border-radius (모서리 둥글리기)

테두리 한 줄 함께 넣기

유리판 효과가 보이려면 두 가지가 필요합니다

backdrop-filter 는 요소 자신이 아니라 요소 뒤에 깔린 내용을 흐리거나 채도를 올립니다. 그래서 요소 배경이 완전히 불투명하면 흐려진 배경이 가려져 아무 변화도 보이지 않고, 뒤에 이미지나 색이 없으면 흐릴 대상이 없습니다. 이 생성기는 반투명 배경과 필터 함수를 한 블록으로 함께 만듭니다.

접두사 속성을 함께 적습니다

사파리 계열은 오래 -webkit-backdrop-filter 만 인식해 왔으므로 표준 속성과 접두사 속성을 같은 값으로 나란히 출력합니다. 지금 보고 있는 브라우저가 어느 쪽을 지원하는지도 결과에 표시합니다. 속성 표기는 W3C 의 Filter Effects 명세를 따릅니다(2026년 10월 기준).

하지 않는 것

요소 자신에 효과를 입히는 filter 는 만들지 않습니다. 두 속성은 대상이 달라 별도 도구가 맡습니다. 보기 좋은 흐림 값이나 불투명도를 권하지도 않고, 넣은 값으로만 코드를 만듭니다. 성능 부담이 큰 효과이므로 넓은 영역에 쓸 때는 실제 기기에서 확인하세요.

자주 묻는 질문

코드를 붙였는데 흐림이 안 보입니다.

요소 배경이 불투명하거나 뒤에 아무것도 없을 때 그렇습니다. 배경을 반투명하게 두고 뒤에 이미지나 색이 깔려 있어야 보입니다.

-webkit-backdrop-filter 를 왜 같이 적나요?

사파리 계열이 오래 접두사 속성만 인식해 왔기 때문입니다. 두 줄을 같은 값으로 적어 두면 어느 쪽만 지원하는 브라우저에서도 동작합니다.

filter 와 무엇이 다른가요?

filter 는 요소 자신을, backdrop-filter 는 요소 뒤에 깔린 내용을 처리합니다. 대상이 달라서 한쪽을 적어도 다른 쪽 효과는 나지 않습니다.

🌁CSS backdrop-filter 코드 생성기

관련된 도구

CSS 글래스모피즘 효과 코드 생성기

CSS filter 효과 코드 생성기

유리판 효과가 보이려면 두 가지가 필요합니다

접두사 속성을 함께 적습니다

하지 않는 것

자주 묻는 질문

관련된 도구

CSS 글래스모피즘 효과 코드 생성기

CSS filter 효과 코드 생성기

유리판 효과가 보이려면 두 가지가 필요합니다

접두사 속성을 함께 적습니다

하지 않는 것

자주 묻는 질문

같은 카테고리 도구