backdrop-filter
배경 요소에 블러나 색상 효과를 적용하는 CSS 속성입니다.
backdrop-filter: blur(10px)로 글래스모피즘의 핵심 효과를 만듭니다.
글래스모피즘 또는 글래스모피즘(Glassmorphism)은 반투명한 유리처럼 보이는 현대적인 UI 디자인 트렌드입니다. Apple의 iOS와 macOS에서 널리 사용되면서 인기를 얻었으며, 다음과 같은 특징을 가집니다:
background-color와 alpha 값을 조정하여 투명도를 설정합니다. 0.1-0.3 사이의 값이 가장 자연스러운 글래스모피즘 효과를 만듭니다.
backdrop-filter blur 속성으로 배경 흐림 효과를 조절합니다. 10-20px 정도의 블러가 가장 일반적으로 사용됩니다.
border-radius로 둥근 모서리를, box-shadow로 자연스러운 그림자 효과를 추가합니다.
완성된 CSS 코드를 복사해서 웹사이트나 앱에 바로 적용하세요.
배경 요소에 블러나 색상 효과를 적용하는 CSS 속성입니다.
backdrop-filter: blur(10px)로 글래스모피즘의 핵심 효과를 만듭니다.
background: rgba(255, 255, 255, 0.25)처럼
투명도가 있는 배경색을 설정하여 반투명 효과를 만듭니다.
모서리를 둥글게 만드는 속성입니다.
border-radius: 10px로 부드러운 형태를 만듭니다.
그림자 효과를 추가하여 깊이감을 연출합니다. 여러 개의 그림자를 조합하여 더 자연스러운 효과를 만들 수 있습니다.
backdrop-filter 속성은 대부분의 현대 브라우저에서 지원됩니다:
호환성 팁: 구형 브라우저를 위해 backdrop-filter 없이도 보기 좋은 대체 스타일을 함께 제공하는 것이 좋습니다.
alpha 값은 0.1-0.3 사이를 권장합니다. 너무 투명하면 보이지 않고, 너무 불투명하면 글래스모피즘 효과가 사라집니다.
10-20px의 블러가 가장 자연스럽습니다. 모바일에서는 더 작은 값(5-10px)을 사용하는 것이 좋습니다.
글래스모피즘 요소 뒤에는 다채로운 배경이나 그라디언트를 사용하여 효과를 극대화하세요.
반투명 배경 위의 텍스트는 충분한 대비를 유지해야 합니다. 필요시 text-shadow를 추가하세요.
글래스모피즘은 투명하고 흐릿한 유리 효과를, 뉴모픽은 부드러운 그림자로 입체감을 만드는 효과입니다. 글래스모피즘은 backdrop-filter를, 뉴모픽은 box-shadow를 주로 사용합니다.
네, 대부분의 모던 모바일 브라우저에서 지원합니다. 다만 성능을 위해 블러 값을 조금 낮추는 것을 권장합니다.
네, 생성된 CSS 코드는 제한 없이 개인 및 상업 프로젝트에서 자유롭게 사용하실 수 있습니다.