글래스모피즘(Glassmorphism) — 흐림과 반투명 배경으로 유리 같은 효과를 만드는 모던 디자인 트렌드의 CSS를 즉시 생성합니다.
Glassmorphism

CSS 코드


        

    


    

        
글래스모피즘 사용법

        
    
            
  1. 흐림·투명도·채도·둥글기를 슬라이더로 조정합니다.
    2. 
            
  2. 유리 색상과 테두리 옵션을 선택합니다.
    3. 
            
  3. 그라데이션 배경 위 미리보기로 결과를 확인합니다.
    4. 
            
  4. 복사로 CSS 코드를 가져갑니다.
    5. 
        


        
주요 기능

        
    
            
  • backdrop-filter blur·saturate 동시 조절
    • 
            
  • 반투명 배경 색상·투명도
    • 
            
  • 모서리 둥글기·테두리 옵션
    • 
            
  • 실시간 미리보기 (그라데이션 배경)
    • 
        


        
활용 예시

        
    
            
  • 모달·다이얼로그 배경
    • 
            
  • 네비게이션 바 (sticky header)
    • 
            
  • 카드 UI
    • 
            
  • 로그인·가입 폼
    • 
            
  • iOS 컨트롤 센터 스타일 UI
    • 
        


        
글래스모피즘이란?

        
2020년경부터 유행한 디자인 트렌드로, 반투명한 흐림 배경으로 유리 같은 깊이감을 만듭니다. macOS Big Sur, iOS 14+ UI에서 시작되어 웹·앱 디자인 전반에 퍼졌습니다. 핵심은 backdrop-filter: blur()와 반투명 배경의 조합입니다.


        
자주 묻는 질문

        

            

                모든 브라우저에서 동작하나요?
                
Chrome·Safari·Edge는 완전 지원, Firefox는 최근 버전에서 지원합니다. 미지원 브라우저에서는 흐림 없는 반투명 배경으로 fallback됩니다.

            

            

                배경이 단색일 때는 효과가 없나요?
                
맞습니다. 글래스모피즘은 뒤에 그라데이션·이미지·복잡한 배경이 있어야 효과가 살아납니다. 단색 배경에서는 단순 반투명과 시각적 차이가 없습니다.

            

            

                성능에 영향을 주나요?
                
backdrop-filter는 GPU 연산이 필요해 모바일에서 약간 느릴 수 있습니다. 한 페이지에 너무 많이 사용하면 스크롤이 끊길 수 있으니 핵심 영역에만 적용하세요.

            

            

                다크 모드에서는 어떻게?
                
다크 배경에는 rgba(255,255,255,0.1) 같은 밝은 반투명을, 라이트 배경에는 rgba(0,0,0,0.1) 같은 어두운 반투명을 사용하면 자연스럽습니다.