[CSS] 글래스모피즘(glassmorphism) 구현하기

새로 포폴을 만들면서 이것저것 둘러보다가 올해에도 글래스모피즘의 트렌드가 계속 될 거란 글을 봤다. '아 그럼 한번은 써야지' 하고 생각만 했었는데🤔 마침 포폴사이트 프로필 부분에 아이디카드?처럼 넣으면 적당할 거 같아서 만들어보기로 했다


글래스모피즘(glassmorphism)이란 반투명 효과를 사용하여 요소 간의 시각적 계층을 표현하는 그래픽 스타일 이다.

• 투명도 (배경 흐림을 이용한 반투명 효과)
• 물체가 떠 있는 다층 접근 방식
• 흐릿한 투명도를 강조하는 선명한 색상
• 반투명 물체의 미묘하고 밝은 테두리

이런 특성을 가지고 있어서 CSS로 구현하려면

• background : rbga
• backdrop-filter : blur
• border
• box-shadow

기본적으로 이렇게 4가지 속성은 필요하다고 한다.

이런 특성을 따져서 우선 기본적인 설정으로 만들어봤는데

blur가 생각했던 것보다 구현이 세게 됐고 border를 상하 좌우로 나눠서 다르게 설정했는데도 부자연스러웠다. 그리고 뭔가 묘하게..... 불필요할만큼 불투명해서 유리/얼어버린 표면 같은 느낌이 안 사는 것 같아 수정이 필요해.,,,

배경 자체에 투명도를 높이면

background 속성에서 투명도를 높이고 border색은 회색계열로 바꿔서 상하좌우 전부 같은 값을 적용했다. backdrop-filter:blur값도 20px로 아예 확 줄였고..! 아직까지 조금은 뿌옇고 표면이 유광인 것 같은(?) 느낌이 있지만 배경사이즈나 border 등 미세하게 다른 부분들이 있어서 그런거니까
다들 각자 디자인에 맞게, 나도 사이트 코드 최적화 하면서 좀 더 눈에 잘 보이게 구현해봐야지🧐

🖥️아래는 올려둔 마지막 사진에 대한 코드🧪

.sc-profile-wrap-bgAdd {
    width: 1264px; 
    height: 800px;
    margin: auto;
    /* 사이즈와 마진값은 임의의 설정으로 봐주세요 */
    background: linear-gradient(135deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.3) 30%);
    border-radius: 50px;
    border: solid 1px var(--color-gray);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 34px rgba(0, 0, 0, 0.15);
}