01 — Hero

Welcome aboard

반투명 보라 안개.

Apple Tahoe 의 Glassmorphism — backdrop-filter blur + saturate + radial Purple Haze. 프리미엄 SaaS · 한정판 · 럭셔리 product. 1000명 한정판 톤.

02 — Typography

Display XL · 4.5rem

Display XL

Display · 3.5rem

Display Default

Title LG · 32px

Title LG

Title · 24px

Title default

Body · 1rem

Body 1rem regular. The quick brown fox jumps over the lazy dog.

Mono · 0.875rem

$ open Liquid-Glass.app
03 — Buttons
04 — Form

별칭

소개

진행률 · 72%

05 — Tags
Default Premium Active Limited Sold out Inverted
06 — Cards

Default

Translucent.

기본 glass — backdrop blur + 반투명 보더.

View details →
07 — Stats

Members

042 / 1000

↑ 8 new this week

Build

v0.5.0

↑ 432/432 passing

Uptime

99.94%

↓ 3min today

08 — Article

Design Note

Apple Tahoe 의 Glassmorphism.

By Cupertino · 2024 · 5 min read

Backdrop-filter blur(18px) saturate(160%) 가 카드 뒤 배경을 흐릿하게 만들어 깊이감을 만듭니다. 동시에 Purple Haze radial gradient 가 body 배경에 미세한 보라 후광을 만들어 *공기감* 을 더합니다.

시그니처 mechanism 4가지: ① backdrop-filter blur (10~18px) ② radial Purple Haze ③ glass-border (1px 반투명 화이트) ④ accent glow (0 0 24px). 프리미엄 SaaS · 한정판 product · 럭셔리 톤에 적합합니다.

깊이감은 그림자가 아니라 *흐림* 으로 만든다.

참고: Apple HIG — Materials

09 — Signature

Glassmorphism 시그니처: layered glass stack — Purple Haze radial bg + 3 단계 blur 카드.

RADIAL TINT

Purple Haze

Body 의 5-spot mesh gradient 가 카드 뒤로 비춰 보입니다. backdrop-filter 가 그 색을 흐려서 깊이감.

BACKDROP BLUR

Glassmorphism

blur(20px) + saturate(180%) — Apple Tahoe 시그니처. 카드가 떠 있고 뒤 배경이 흐릿해지는 깊이감.

DEEPER GLASS

Soft halo

반전 darker glass — 같은 톤 안에서 더 깊은 layer. accent-glow 가 카드를 빛나게 합니다.

이 디자인, 내 프로젝트에 바로 쓸 수 있어요

크리에이터OS가 있으면 말 한마디로, 없어도 2단계면 즉시 적용돼요.

Creator OS 사용 중이라면

에이전트에게 말 한마디면 끝

테마 선택·CSS 세팅·컴포넌트 배치까지 자동이에요. 코드 한 줄 안 봐도 돼요.

"Glassmorphism로 랜딩 페이지 만들어줘"
Creator OS 시작하기 →
직접 적용하고 싶다면

2단계로 즉시 적용

① HTML 파일 <head> 안에 아래 2줄 붙여넣기

<link rel="stylesheet"
  href="https://design-tokens.creator-os.app
        /design-tokens.css">
<link rel="stylesheet"
  href="https://design-tokens.creator-os.app
        /design-components.css">

② <body> 태그에 테마 한 줄 추가

<body data-theme="purple-haze">

버튼·카드·폼·태그가 모두 반투명 보라 Glassmorphism 디자인으로 바뀌어요. Framer · Wix 커스텀 코드에도 동일하게 작동해요.