Mesh Gradient
Interface
Multi-point radial gradients layer like watercolor washes, creating soft dimensional depth. Each orb bleeds into the next -- no hard edges, only luminous transitions that shift as you scroll.
다중 포인트 방사형 그라데이션이 수채화처럼 겹겹이 쌓여 부드럽고 입체적인 깊이를 만듭니다. 각 오브는 다음으로 스며들어 -- 날카로운 경계 없이, 스크롤에 따라 변하는 발광 전환만 존재합니다.
多点放射グラデーションが水彩のように重なり合い、柔らかく立体的な奥行きを生み出します。 各オーブは次へとにじみ、鋭い境界線はなく、スクロールに応じて変化する発光トランジションのみが存在します。
X-Ray View
X-Ray 뷰
X-Ray ビュー
Gradient Anatomy
그라데이션 해부
グラデーション解剖図
Five radial gradient orbs positioned at precise mesh coordinates. Each point radiates color that fades into transparency, blending where they overlap.
정밀한 메시 좌표에 배치된 5개의 방사형 그라데이션 오브. 각 포인트는 투명도로 사라지는 색상을 방사하며, 겹치는 곳에서 블렌딩됩니다.
正確なメッシュ座標に配置された5つの放射グラデーションオーブ。各ポイントは透明に溶け込む色を放射し、重なる部分でブレンドされます。
Composition
구성
コンポジション
Layer Stack
레이어 스택
レイヤースタック
Mesh gradients are built by stacking translucent radial layers. Each layer contributes one color zone -- together they form the full mesh.
메시 그라데이션은 반투명 방사형 레이어를 쌓아 구축합니다. 각 레이어는 하나의 색상 영역을 기여하며, 함께 전체 메시를 형성합니다.
メッシュグラデーションは半透明の放射レイヤーを重ねて構築されます。各レイヤーが一つの色領域を提供し、合わせて完全なメッシュを形成します。
In Practice
실전 적용
実践適用
Application Gallery
적용 갤러리
適用ギャラリー
Three blur intensities show how content layers over the mesh. Lower blur reveals more color; higher blur creates frosted glass.
세 가지 블러 강도가 콘텐츠가 메시 위에 겹치는 방식을 보여줍니다. 낮은 블러는 더 많은 색상을, 높은 블러는 프로스티드 글래스를 만듭니다.
3つのブラー強度がコンテンツがメッシュ上に重なる様子を示します。低ブラーはより多くの色を、高ブラーはフロストガラスを生み出します。
blur(4px)
Light Frost
라이트 프로스트
ライトフロスト
Minimal blur lets gradient colors show through. Best for decorative backgrounds where vibrancy matters.
최소 블러로 그라데이션 색상이 투과됩니다. 생동감이 중요한 장식적 배경에 적합합니다.
最小ブラーでグラデーション色が透過します。鮮やかさが重要な装飾的背景に最適です。
blur(12px)
Medium Glass
미디엄 글래스
ミディアムグラス
Balanced blur softens the mesh into a gentle haze. Ideal for content cards that need readable text.
균형 잡힌 블러가 메시를 부드러운 안개로 만듭니다. 읽기 쉬운 텍스트가 필요한 콘텐츠 카드에 이상적입니다.
バランスの取れたブラーがメッシュを穏やかなヘイズに変えます。読みやすいテキストが必要なコンテンツカードに最適です。
blur(24px) + saturate(140%)
Deep Frosted
딥 프로스티드
ディープフロスト
Heavy blur with saturation boost. Creates opaque-feeling panels while retaining translucent luminosity.
채도 부스트와 함께하는 강한 블러. 반투명 발광을 유지하면서 불투명한 느낌의 패널을 만듭니다.
彩度ブースト付きの強いブラー。半透明の発光を保ちながら不透明感のあるパネルを作ります。
AI Request Prompt
Design a landing page in Mesh Gradient style — layered radial color blobs on a light base. COLOR TOKENS: --bg: #faf8f6 --card-bg: rgba(255, 255, 255, 0.75) --border: rgba(26, 26, 46, 0.08) --text: #1a1a2e --text-muted: #8e8e9a --accent-1: #6c63ff --accent-2: #f857a6 --accent-3: #ff5858 No other colors. TYPOGRAPHY: Heading: "Inter" sans-serif, 800 weight, tracking -0.04em Body: "Noto Sans" / "Inter" sans-serif, 400 / 500 weight Scale: 14 / 15 / 16 / 17 / 32 / 74px (clamp(2rem, 5.5vw, 4.6rem)) Body line-height: 1.8 Heading line-height: 1.05 Title uses gradient text: linear-gradient(135deg, #6c63ff 0%, #f857a6 50%, #ff5858 100%), background-clip text. UI: - Hero card: 1px solid var(--border), border-radius 32px, background var(--card-bg), backdrop-filter blur(20px) saturate(140%), box-shadow 0 20px 60px rgba(0,0,0,0.06) - Tiles: 1px solid var(--border), border-radius 18px, background rgba(255,255,255,0.55), backdrop-filter blur(8px) - Tile hover: transform translateY(-2px), box-shadow 0 8px 24px rgba(108,99,255,0.1) - Prompt section: background var(--card-bg), border-radius 24px, backdrop-filter blur(12px) - Buttons: 1px solid var(--accent-1), border-radius 999px, background rgba(108,99,255,0.06), font-weight 500, hover background rgba(108,99,255,0.14) + box-shadow 0 4px 16px rgba(108,99,255,0.15) LAYOUT: - Container: min(1080px, 92vw) centered, padding 28px 0 80px - Hero padding: clamp(24px, 5vw, 52px) - Feature grid: repeat(auto-fit, minmax(200px, 1fr)), gap 12px - Lead paragraph max-width: 680px MOTION: - Tile entrance: translateY(14px) to 0, opacity 0 to 1, 0.6s ease, stagger 0.08s per tile - Tile hover: transform 0.2s, box-shadow 0.2s - Button hover: all 0.25s ease - Mesh background: fixed div with 5 radial-gradients: radial-gradient(at 20% 10%, rgba(108,99,255,0.28), transparent 50%) radial-gradient(at 80% 20%, rgba(248,87,166,0.22), transparent 50%) radial-gradient(at 50% 60%, rgba(255,88,88,0.18), transparent 50%) radial-gradient(at 10% 80%, rgba(108,99,255,0.15), transparent 40%) radial-gradient(at 90% 80%, rgba(255,200,55,0.12), transparent 40%) RESPONSIVE: - Below 768px: single column tiles, gradient opacity reduced by 40%, card border-radius 20px, hero padding 24px, title clamps down to 2rem - Above 768px: auto-fit grid 2–4 columns, full backdrop-filter effects FORBIDDEN: - No dark backgrounds — light airy base only - No hard borders heavier than 1px - No box-shadow darker than rgba(0,0,0,0.06) - No more than 5 gradient layers in mesh background - No solid opaque card backgrounds — must remain translucent OUTPUT: 1. Single HTML file with inline CSS 2. Fixed mesh gradient background with 5 radial-gradient layers 3. Frosted glass cards using backdrop-filter blur + saturate 4. Gradient-clipped heading text 5. Color token custom properties in :root 6. Responsive layout using CSS clamp() and auto-fit grid
Mesh Gradient 스타일의 랜딩 페이지를 디자인해줘 — 밝은 베이스 위에 겹겹이 쌓인 방사형 컬러 블롭. 색상 토큰: --bg: #faf8f6 --card-bg: rgba(255, 255, 255, 0.75) --border: rgba(26, 26, 46, 0.08) --text: #1a1a2e --text-muted: #8e8e9a --accent-1: #6c63ff --accent-2: #f857a6 --accent-3: #ff5858 다른 색상 사용 금지. 타이포그래피: 제목: "Inter" sans-serif, 800 weight, tracking -0.04em 본문: "Noto Sans" / "Inter" sans-serif, 400 / 500 weight 스케일: 14 / 15 / 16 / 17 / 32 / 74px (clamp(2rem, 5.5vw, 4.6rem)) 본문 line-height: 1.8 제목 line-height: 1.05 제목에 그라데이션 텍스트 적용: linear-gradient(135deg, #6c63ff 0%, #f857a6 50%, #ff5858 100%), background-clip text. UI: - 히어로 카드: 1px solid var(--border), border-radius 32px, background var(--card-bg), backdrop-filter blur(20px) saturate(140%), box-shadow 0 20px 60px rgba(0,0,0,0.06) - 타일: 1px solid var(--border), border-radius 18px, background rgba(255,255,255,0.55), backdrop-filter blur(8px) - 타일 hover: transform translateY(-2px), box-shadow 0 8px 24px rgba(108,99,255,0.1) - 프롬프트 섹션: background var(--card-bg), border-radius 24px, backdrop-filter blur(12px) - 버튼: 1px solid var(--accent-1), border-radius 999px, background rgba(108,99,255,0.06), font-weight 500, hover시 background rgba(108,99,255,0.14) + box-shadow 0 4px 16px rgba(108,99,255,0.15) 레이아웃: - 컨테이너: min(1080px, 92vw) 중앙정렬, padding 28px 0 80px - 히어로 padding: clamp(24px, 5vw, 52px) - 피처 그리드: repeat(auto-fit, minmax(200px, 1fr)), gap 12px - 리드 문단 max-width: 680px 모션: - 타일 등장: translateY(14px)→0, opacity 0→1, 0.6s ease, 타일당 0.08s 순차 지연 - 타일 hover: transform 0.2s, box-shadow 0.2s - 버튼 hover: all 0.25s ease - 메시 배경: fixed div에 5개 radial-gradient: radial-gradient(at 20% 10%, rgba(108,99,255,0.28), transparent 50%) radial-gradient(at 80% 20%, rgba(248,87,166,0.22), transparent 50%) radial-gradient(at 50% 60%, rgba(255,88,88,0.18), transparent 50%) radial-gradient(at 10% 80%, rgba(108,99,255,0.15), transparent 40%) radial-gradient(at 90% 80%, rgba(255,200,55,0.12), transparent 40%) 반응형: - 768px 미만: 단일 열 타일, 그라데이션 opacity 40% 감소, 카드 border-radius 20px, 히어로 padding 24px, 제목 최소 2rem - 768px 이상: auto-fit 그리드 2~4열, 풀 backdrop-filter 효과 금지사항: - 다크 배경 금지 — 밝고 경쾌한 베이스만 - 1px보다 두꺼운 보더 금지 - rgba(0,0,0,0.06)보다 진한 box-shadow 금지 - 메시 배경에 그라데이션 레이어 5개 초과 금지 - 불투명 카드 배경 금지 — 반드시 반투명 유지 출력: 1. 인라인 CSS가 포함된 단일 HTML 파일 2. 5개 radial-gradient 레이어의 고정 메시 그라데이션 배경 3. backdrop-filter blur + saturate를 활용한 프로스티드 글래스 카드 4. 그라데이션 클리핑 제목 텍스트 5. :root에 색상 토큰 커스텀 프로퍼티 6. CSS clamp()와 auto-fit 그리드를 활용한 반응형 레이아웃
Mesh Gradientスタイルのランディングページをデザインしてください — 明るいベースの上にレイヤードされた放射状カラーブロブ。 カラートークン: --bg: #faf8f6 --card-bg: rgba(255, 255, 255, 0.75) --border: rgba(26, 26, 46, 0.08) --text: #1a1a2e --text-muted: #8e8e9a --accent-1: #6c63ff --accent-2: #f857a6 --accent-3: #ff5858 他の色は使用禁止。 タイポグラフィ: 見出し: "Inter" sans-serif, 800 weight, tracking -0.04em 本文: "Noto Sans" / "Inter" sans-serif, 400 / 500 weight スケール: 14 / 15 / 16 / 17 / 32 / 74px (clamp(2rem, 5.5vw, 4.6rem)) 本文 line-height: 1.8 見出し line-height: 1.05 タイトルにグラデーションテキスト適用: linear-gradient(135deg, #6c63ff 0%, #f857a6 50%, #ff5858 100%), background-clip text。 UI: - ヒーローカード: 1px solid var(--border), border-radius 32px, background var(--card-bg), backdrop-filter blur(20px) saturate(140%), box-shadow 0 20px 60px rgba(0,0,0,0.06) - タイル: 1px solid var(--border), border-radius 18px, background rgba(255,255,255,0.55), backdrop-filter blur(8px) - タイルhover: transform translateY(-2px), box-shadow 0 8px 24px rgba(108,99,255,0.1) - プロンプトセクション: background var(--card-bg), border-radius 24px, backdrop-filter blur(12px) - ボタン: 1px solid var(--accent-1), border-radius 999px, background rgba(108,99,255,0.06), font-weight 500, hover時 background rgba(108,99,255,0.14) + box-shadow 0 4px 16px rgba(108,99,255,0.15) レイアウト: - コンテナ: min(1080px, 92vw) 中央揃え, padding 28px 0 80px - ヒーロー padding: clamp(24px, 5vw, 52px) - フィーチャーグリッド: repeat(auto-fit, minmax(200px, 1fr)), gap 12px - リード段落 max-width: 680px モーション: - タイル登場: translateY(14px)→0, opacity 0→1, 0.6s ease, タイルごとに0.08s順次遅延 - タイルhover: transform 0.2s, box-shadow 0.2s - ボタンhover: all 0.25s ease - メッシュ背景: fixed divに5つのradial-gradient: radial-gradient(at 20% 10%, rgba(108,99,255,0.28), transparent 50%) radial-gradient(at 80% 20%, rgba(248,87,166,0.22), transparent 50%) radial-gradient(at 50% 60%, rgba(255,88,88,0.18), transparent 50%) radial-gradient(at 10% 80%, rgba(108,99,255,0.15), transparent 40%) radial-gradient(at 90% 80%, rgba(255,200,55,0.12), transparent 40%) レスポンシブ: - 768px未満: 単一列タイル, グラデーションopacity 40%低減, カードborder-radius 20px, ヒーローpadding 24px, タイトル最小2rem - 768px以上: auto-fitグリッド2〜4列, フルbackdrop-filter効果 禁止事項: - ダーク背景禁止 — 明るくエアリーなベースのみ - 1pxより太いボーダー禁止 - rgba(0,0,0,0.06)より濃いbox-shadow禁止 - メッシュ背景にグラデーションレイヤー5個超過禁止 - 不透明なカード背景禁止 — 必ず半透明を維持 出力: 1. インラインCSS付きの単一HTMLファイル 2. 5つのradial-gradientレイヤーによる固定メッシュグラデーション背景 3. backdrop-filter blur + saturateを活用したフロストガラスカード 4. グラデーションクリッピングの見出しテキスト 5. :rootにカラートークンカスタムプロパティ 6. CSS clamp()とauto-fitグリッドを活用したレスポンシブレイアウト