Glassmorphism 생성기

glassmorphism / neumorphism 생성기란?

*Glassmorphism* 과 *neumorphism* 은 현대 웹 디자인 곳곳에서 마주치는 두 가지 표면 스타일입니다. **글래스**는 프로스티드 글래스 룩 — 반투명 카드로 뒤를 흐리게 하고, 보통 다채로운 그라디언트나 사진 위에 올라갑니다. **Neumorphism**은 부드러운 플라스틱 룩 — 배경과 같은 톤의 명암 짝 그림자로 표면에서 솟아나오(거나 가라앉아 있)는 듯 보이는 카드입니다.

두 효과 모두 순수 CSS — 이미지, 자바스크립트, 라이브러리 없이. 글래스는 backdrop-filter: blur() + 반투명 채우기 + 얇은 테두리. Neumorphism은 두 개의 box-shadow로 만들어집니다: 표면보다 약간 어두운 것과 약간 밝은 것을 반대 방향으로 오프셋. 수학은 짧지만, 모든 게 자리잡을 때까지 손으로 값 조절을 하는 데에는 시간이 걸립니다. 생성기는 그 단계를 건너뜁니다.

이 도구는 중요한 각 파라미터의 슬라이더, 글래스 효과가 굴절시킬 무언가가 필요하므로 구성 가능한 배경 위의 미리보기 패널, 그리고 원클릭 CSS 복사를 제공합니다. 모든 게 브라우저에서 — 스니펫을 스타일시트에 바로 붙여넣으세요.

이 표면들과 놀며 배우는 것

• backdrop-filter가 glassmorphism을 살리는 속성 — 요소 자체가 아니라 요소 *뒤*를 블러/포화시킨다.
• 글래스는 진짜 프로스티드 소재처럼 보이려면 반투명 채우기(낮은 알파의 rgba(...))와 얇은 밝은 테두리가 필요 — 둘 중 하나라도 빠지면 효과가 무너진다.
• Neumorphism은 **두 개**의 box-shadow를 쓴다: 우하단의 어두운 그림자와 좌상단의 밝은 하이라이트, 둘 다 순흑/순백이 아니라 표면 톤.

글래스나 neumorphism 표면을 단계별로 만들기

1. 1

   스타일 모드 선택

   상단에서 **글래스**와 **Neumorphism**을 전환. 글래스는 배경이 필요, neumorphism은 당신이 정하는 평평한 표면 색 위에 놓인다.

2. 2

   핵심 파라미터 조정

   글래스에서는 *blur*(배경 번짐 정도), *배경 투명도*(카드 투명도), *tint*(미세한 색조)가 중심. Neumorphism에서는 *거리*(그림자 오프셋), *blur*(부드러움), *강도*(밝은/어두운 짝이 표면에서 얼마나 벗어나는가)가 중심.

3. 3

   배경 또는 표면 색 선택

   글래스는 강렬한 그라디언트나 사진에서 잘 보인다. Neumorphism은 부드러운 비순색에서 잘 보인다(#e0e5ec이 표준 neumorphic 그레이). 클릭 가능한 프리셋 줄을 제공.

4. 4

   Neumorphism 스타일 전환

   세 가지: **Raised**(돌출), **Flat**(그라디언트 없는 같은 그림자), **Inset**(눌림). 셋 다 시도 — 그림자 수학은 같고 방향만 바뀐다.

5. 5

   CSS 복사

   **복사**를 누르고 스타일시트에 붙여넣기. 출력은 프로덕션 준비 완료: 구형 Safari용 -webkit-backdrop-filter, 속성 순서, 매칭되는 border-radius까지 — 단일 클래스로 작동.

글래스와 neumorphism — 빠른 참조

각 효과가 실제로 의존하는 속성. 전체 레퍼런스: MDN — backdrop-filter와 box-shadow.

시도해 볼 표면 예시

background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(14px) saturate(180%);-webkit-backdrop-filter: blur(14px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.30);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

background: linear-gradient(145deg, #f0f5fa, #cdd1d7);border-radius: 24px;box-shadow:  16px 16px 32px #b8bcc1,  -16px -16px 32px #ffffff;

background: #e0e5ec;border-radius: 24px;box-shadow:  inset 8px 8px 16px #b8bcc1,  inset -8px -8px 16px #ffffff;

글래스 / neumorphism의 흔한 실수

• -webkit-backdrop-filter 빠뜨림. 구형 Safari(임베디드 WebView 포함)는 접두사 없는 backdrop-filter를 무시해 글래스가 통짜 블록이 된다.
• Neumorphic 그림자에 순흑/순백 사용. 진짜 neumorphism은 표면 톤에 **가까운** 두 색을 쓴다 — 흑백 그림자는 카드를 싸구려로 보이게 한다.
• 글래스를 단색 흰 위에 놓기. 블러 뒤에 색이 없어 효과가 사라지고 살짝 톤 들어간 상자만 남는다. 글래스는 분주한 배경을 원한다.

Glassmorphism 생성기 FAQ