CSS 1줄 코딩으로 반투명 유리 배경 효과 구현하기(backdrop-filter)

반투명으로 아웃 포커싱된 배경을 만드는 CSS 기법은 여러 가지가 있지만, 만드는 방법이 다소 복잡한 편입니다.

새 CSS 속성을 사용하면 반투명 유리 배경 효과를 단 1줄의 CSS 속성으로 만들 수 있습니다.

CSS 속성 중 "backdrop-filter"가 있습니다.

속성 값은 여러 가지를 지정할 수 있지만 우리가 만드려고 하는 반투명 흐린 배경 효과를 만드는데는 "blur" 속성 값을 사용합니다. 

다음처럼 작성하면

backdrop-filter: blur(10px);

배경 이미지 안에 있는 요소는 흐림(blur) 효과가 적용되어 반투명 유리에 보이는 것처럼 배경 이미지가 비쳐 보이는 효과가 적용됩니다.

먼저 배경 이미지가 있는 간단한 HTML 영역을 하나 만듭니다.

".background" 클래스는 배경 이미지를 붙이는 클래스이고, 우리가 "backdrop-filter" 를 적용해서 반투명으로 배쳐 보이도록 만드는 요소는 ".backdrop" 클래스를 적용한 내부 요소가 됩니다.

<div class="background">
	<div class="backdrop"></div>
</div>

CSS로 기본 배치를 합니다.

플렉스 박스로 600x600px 영역에 배경 이미지를 배치하고, 플렉스박스 정 가운데에 300x300px 내부 요소가 오도록 했습니다.

.background{
    background-image: url(./backup/850/img/face.jpg);
    background-size: cover;
    width: 600px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.backdrop{
    width: 300px;
    height: 300px;
    background-color: rgba(0,0,128,0.1);
    border-radius: 30px;
}

가운데 위치한 내부 요소가 보이지 않으므로 반투명 파랑색을 적용해서 위치를 알 수 있도록 하면 다음 같은 상태가 됩니다.

이제 마법의 속성인 

backdrop-filter: blur(10px);

을 추가합니다. 블러(blur) 값을 얼마를 주냐는 취향이겠지만, 10 ~ 15px 사이가 가장 좋은 효과를 보입니다.

조금 더 입체감이 있어 보이도록 배경 그림자 효과를 적용해 떠있는 느낌을 살립니다.

box-shadow: 2px 7px 15px 8px rgba(0,0,0,0.3);

완성된 박스는 다음과 같은 모양이 됩니다.

앞서 내부 요소에 반투명 컬러를 적용한 것처럼, 컬러를 추가해서 반투명 효과를 조금 더 극적으로 만들 수도 있습니다.

최종적으로 완성된 CSS 는 다음과 같이 됩니다.

.backdrop{
    width: 300px;
    height: 300px;
    border-radius: 30px;
    background-color: rgba(255,255,192,0.1);
    backdrop-filter: blur(10px);
    box-shadow: 2px 7px 15px 8px rgba(0,0,0,0.3);
}

주의사항

인터넷 익스플로러를 제외하고, 이 속성은 파이어폭스에서는 공식적으로 지원되지 않습니다.

파이어폭스를 제외한 크롬, 신형 엣지, 사파리, 오페라 웹 브라우저에서는 모두 지원됩니다.

파이어폭스에서는 기능은 제공되지만, 제공할지 말지가 정해지지 않은 실험실? 기능으로 아직 남아 있습니다.

파이어폭스에서 이 속성을 사용 가능하도록 켜려면

layout.css.backdrop-filter.enabled

gfx.webrender.all

두 옵션을 사용 가능(enabled) 로 켜야 효과가 적용됩니다.

파이어폭스 URL 입력 창에 "about:config" 를 입력해 환경설정으로 들어간 후

앞의 두 옵션을 검색해서 켜주면 됩니다.

다른 웹 브라우저에서는 모두 지원되고 있는 파이어폭스 실험실 기능인 만큼 차기 버전에서는 공식적으로 지원될 가능성이 높습니다.

이 기능을 "backdrop-filter" 속성 없이 인터넷 익스플로러, 파이어폭스까지 지원하려면 다음 글을 참고하면 됩니다.