Default
Glass overlay.
Mesh 배경 위 backdrop-blur frosted glass — Aurora 시그니처.
View Details →AI · Modern SaaS
Built for the
next interface.
다중 radial-gradient mesh + grain texture + glass card overlay. Stripe, Linear, shadcn/ui Aurora 라인의 모던 SaaS hero 톤이에요. AI 스타트업 · ML 도구 · 크리에이티브 포트폴리오에 어울려요.
Display XL
Display XL
Display
Display Default
Title LG
Title LG
Title
Title default
Body
Body 1rem regular. The quick brown fox jumps over the lazy dog.
Mono
$ npx create-next-app@latestPrimary 는 violet→pink→teal 3-stop 그라데이션. 모든 카드/버튼이 mesh 위에 떠 있는 glass.
Message
Progress · 72%
Default
Accent
Success
Warning
Danger
Inverted
Accent
Aurora gradient.
Violet → Pink → Teal — gradient_accent 직접 fill.
View Details →Inverted
Cool ocean.
Teal → Blue — 차분한 강조.
View Details →Users
12,489
↑ 18% this week
MRR
$42.5K
↑ 7.1% MTD
Latency
12ms
↓ 3ms yesterday
Dispatch · 042
Mesh, not gradient.
By Ryan · 2026.05.22 · 4 min
Aurora / Mesh Gradient는 2023년 Stripe와 Linear가 대중화한 모던 hero 패턴이에요. 여러 radial-gradient 색 blob을 겹쳐 photoshop의 mesh gradient 같은 효과를 CSS로 구현해요. AI 스타트업이 대거 채택하면서 "AI-native interface"의 시그니처 톤이 됐어요.
핵심 메커니즘: ① 5개 radial-gradient blob (양 모서리 + 중앙) 위치/색 분산, ② SVG fractalNoise grain overlay (mix-blend-mode: overlay), ③ 그 위에 backdrop-blur frosted glass 카드 → 깊이감 형성. 전체가 CSS만으로 — JS 의존 없음.
The interface is the algorithm. The mesh is the brand.
참고: Stripe · Linear · Aceternity Aurora
Aurora 시그니처 3종: mesh radial blob 배경 + grain texture + frosted glass overlay.
MESH
5 radial blobs
violet · pink · teal · blue · amber — 4 corners + center.
GRAIN
SVG fractalNoise
baseFrequency=0.9 + mix-blend-mode: overlay = dreamy texture.
GLASS
backdrop-blur 24px
모든 카드/버튼이 mesh 위에 떠 있는 frosted glass.
이 디자인, 내 프로젝트에 바로 쓸 수 있어요
크리에이터OS가 있으면 말 한마디로, 없어도 2단계면 즉시 적용돼요.
Creator OS 사용 중이라면
에이전트에게 말 한마디면 끝
테마 선택·CSS 세팅까지 자동이에요. 코드 한 줄 안 봐도 돼요.
"Aurora 스타일로 AI SaaS 랜딩 만들어줘"Creator OS 시작하기 →
직접 적용하고 싶다면
2단계로 즉시 적용
① <head> 에 CSS 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="aurora">