← Back to Home

Transparent. Luminous. Modern.

Glassmorphism creates a frosted glass effect with transparency, blur, and vivid colors that feel both physical and digital.

Explore Glass Effect

Core Elements

Backdrop Blur

The signature frosted glass effect achieved through backdrop-filter blur, creating depth and hierarchy.

Transparency

Semi-transparent backgrounds that allow the content behind to subtly show through.

Vibrant Gradients

Rich, colorful backgrounds that shine through the glass elements, creating visual interest.

Ethereal Design

Glassmorphism brings a sense of depth and realism to digital interfaces. The translucent layers create a sophisticated visual hierarchy while maintaining a clean, modern aesthetic.

GLASS PANEL

Experience the Clarity

Start Creating

AI 프롬프트 예제

Claude/Cursor를 사용하여 Glassmorphism 스타일의 컴포넌트를 생성할 때 참고하세요.

요구사항

  • backdrop-filter: blur() 속성을 사용한 유리 효과
  • 반투명 배경 (rgba 또는 hsla 사용)
  • 생동감 있는 그라데이션 배경
  • 섬세한 border와 box-shadow로 깊이감 표현
  • 밝고 화려한 색상 팔레트
  • 레이어드 구조로 깊이 표현

제약조건

  • backdrop-filter 브라우저 호환성 고려
  • 반응형 디자인 필수
  • 성능 최적화 (blur 값 적절히 조절)

예상 결과

  • 투명한 유리 같은 카드/패널
  • 배경이 블러 처리되어 보이는 효과
  • 생동감 있는 색상 조합
  • 부드러운 그림자와 테두리
  • 현대적이고 세련된 UI
  • 시각적 깊이감과 입체감

프롬프트 템플릿

Glassmorphism 스타일의 대시보드 카드 컴포넌트를 만들어줘.

요구사항:
- backdrop-filter: blur()를 사용한 frosted glass 효과
- 반투명 배경 (예: rgba(255, 255, 255, 0.1))
- 생동감 있는 그라데이션 배경 레이어
- 1px의 밝은 테두리 (border)
- 부드러운 box-shadow로 떠 있는 느낌
- 카드 내부에 텍스트와 아이콘 배치

스타일 가이드:
- background: rgba(255, 255, 255, 0.1)
- backdrop-filter: blur(10px)
- border: 1px solid rgba(255, 255, 255, 0.2)
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)
- border-radius: 16px 이상

배경:
- 화려한 그라데이션 (예: 보라-파랑-핑크)
- 여러 레이어로 깊이감 표현

반응형 디자인 필수, 브라우저 호환성 고려해줘.