Glassmorphism Card.

진짜 유리처럼 보이는 글래스모피즘 카드입니다. 방향성 엣지 하이라이트, 이중 반사(diffuse + specular), 3D 틸트, 내부 그림자, 표면 노이즈로 사실적인 유리 질감을 구현합니다.

Glassmorphism

Real glass effect

마우스를 움직여 반사와 틸트 효과를 확인하세요

컨트롤 패널

배경 블러 강도 (px)

배경색 불투명도

엣지 하이라이트 강도

내부 그림자 — 유리 두께감

표면 미세 노이즈 (유리 질감)

유리 틴트 색상

카드 뒤 배경 그라디언트

마우스 따라가는 원근 변환

8°

이중 반사 효과 (diffuse + specular)

크기250px
강도0.15
1

인터렉션 아이디어

언제:카드가 렌더링되고 마우스가 카드 위를 움직일 때
무엇을:카드의 유리 질감과 빛 반사를
어떻게:backdrop-filter: blur() + saturate()로 뒤 배경을 흐리게 처리하고, 방향성 있는 gradient border(135° — 위/왼 밝고 아래/오른 어둡게)와 다중 inset box-shadow로 유리 두께감을 표현. 마우스 좌표를 rAF로 추적하여 diffuse(soft-light blend, 큰 반경) + specular(overlay blend, 작은 반경) 이중 반사 레이어를 렌더링하고, perspective(800px) 기반 3D 틸트로 원근감을 부여. SVG feTurbulence 표면 노이즈로 유리 불완전함을 더해 사실적으로 완성
2

바이브 프롬프트

GlassmorphismCard 컴포넌트를 진짜 유리처럼 만들어주세요. 단순한 backdrop-filter blur가 아니라, (1) 방향성 있는 엣지 하이라이트 — linear-gradient(135deg)로 위/왼쪽 밝고 아래/오른쪽 어둡게, (2) 다중 inset box-shadow — 상단 1px 하이라이트, 하단 그림자, 내부 깊은 그림자로 유리 두께감, (3) 이중 반사 레이어 — diffuse(soft-light blend mode, 큰 원) + specular(overlay blend mode, 작고 강한 원) 분리, (4) perspective(800px) 3D 틸트 — 마우스 위치에 따른 rotateX/Y, (5) SVG feTurbulence 표면 노이즈 — 유리 불완전함 표현, (6) saturate(1.2) — 색상 채도 살짝 높임. 모든 마우스 추적은 requestAnimationFrame으로 직접 DOM 조작하여 60fps 보장해주세요.