귀하의 웹사이트에서 간단한 glassmorphism 효과를 달성하는 방법

카드를 사용한 간단한 예


아주 단순한 흐릿한 유리 같은 효과를 만들기 위해 우리는 이 스타일을 추가하기 위해 아주 간단한 CSS를 사용할 수 있습니다.

Glassmorphism은 밝은 색상과 약간의 투명도 및 매우 미묘한 테두리로 배경 흐림을 사용합니다.

CSS 4줄이면 충분합니다.

 backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    background-color: rgba(0, 0, 0, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.125);

배경을 흐리게 처리하고 채도를 200%로 설정하여 배경 색상을 돋보이게 합니다.
내 웹사이트에 표시할 카드에 이 스타일을 사용할 것이므로 테두리도 넣었습니다.
그래서 미묘한 테두리를 사용하여 배경과 분리합니다.
이것은 내 웹 사이트에서 보이는 것입니다


satvik.닌자


취향에 따라 흐림 및 채도 값을 변경하여 이 효과의 모양을 변경할 수 있습니다.