CSS로 글래스모피즘 구현하기

안녕하세요. 오늘은 CSS로 글래스모피즘 디자인을 구현하는 법을 알아보겠습니다.

개인적으로 애플의 디자인 스타일을 좋아해서

좋은 레퍼런스 소재로 구경을 하는데,
오늘 문득 궁금해진 것이 CSS로 어떻게 글래스모피즘을 구현했느냐였습니다.

개발자 도구를 열어 몇 개 DOM을 지우고 스타일을 구경해보니, 생각보다 쉬워서 놀랐습니다.

한번 예제를 통해 직접 구현해봅시다.

1. 직접해보기

콘텐츠가 있는 웹 페이지에서 상단 네비게이션 바를 만들고 (position은 fixed)

아래 처럼 스타일을 부여해줍니다.

.glass {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 20vh;

  background-color: rgba($color: #ffffff, $alpha: 0.72);
  backdrop-filter: blur(20px);

  border-bottom: 1px solid #999;
}

스타일을 부여해줬다면, 적용된 페이지에서 확인해봅시다.

그럼, 위처럼 적용된 모습을 볼 수 있습니다.

이번에 구현을 하면서 backdrop-filter라는 새로운 CSS property를 알게 되었는데요.
궁금해서 MDN을 찾아보니 FireFox나 IE를 제외하고는 최신 버전 브라우저에서 모두 지원된다고 합니다.

글래스모피즘을 좋아하는 저는 앞으로 자주 사용하게 될 것 같습니다.