ヒーロー · ヒーローセクション
鮮やかなメッシュグラデーションのSaaSヒーロー
Stripe/Linear系のモダンなSaaSサイトで主流の、暗背景にカラフルなメッシュグラデーションを敷くヒーローセクション。CSSの conic-gradient + blur で画像を使わずに鮮やかに仕上げる構成。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/gradient-hero/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
SaaSランディングページ向けの、鮮やかなメッシュグラデーション・ヒーローセクションを作ってください。 要件: - ページ内リンクには移動先を用意し、登録・予約・購読・決済が未実装の例では、その説明へ移動する。ブランド・実績・価格は架空の設定と明示する。リンクは44px以上の操作領域とフォーカス表示を持つ。 - 暗背景（near-black）に、複数の発光色（マゼンタ・シアン・パープル・ライム）のラジアルグラデを重ねたメッシュ背景。 - 上層に粒度の細かい SVG ノイズを薄く（5%）合成して、グラデの帯を消す。 - H1 は 2 段。1 行目は通常テキスト（白）、2 行目だけ linear-gradient のテキストクリップで彩色。 - サブテキスト 1 行、bone カラーの opacity 75%。 - プライマリCTA: 白ピル + 黒文字 + 矢印。セカンダリ: ゴーストアウトライン。 - H1 の上に「BUILD 0.4 · NOW IN BETA」風のモノスペース eyebrow + 緑LED ドット。 - 下部に horizontal logo strip（"Trusted by" + 5 ロゴテキストのみ）。 - フォントは Inter / Noto Sans JP。可読性最優先（白テキスト × 暗背景でAA以上）。 - JS不要、外部画像不要、フルレスポンシブ。
バリエーション
ライトテーマ版
同じ構造を反転： - 背景は #fafafb に、淡いパステルメッシュ（peach・mint・lavender・sky）。 - H1 1行目は #0a0a14、2行目はパステルから濃色側のグラデ。 - CTA はソリッド黒ピル + 白文字。
アニメーション版
同じレイアウトのまま、メッシュ全体をゆっくり回転（30秒で1周、@property --angle + conic-gradient）。 H1 のグラデフレーズも 6 秒周期で hue-rotate 12deg。 prefers-reduced-motion 時はすべて停止。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。CSSだけで背景を作る架空の製品紹介です。リンクはページ内の説明へ移動し、登録・認証・AI補完・同期機能はありません。
コードを表示
<!doctype html>
<!-- Vibehaus / CC0 — 改変・商用利用可能。架空のサービスのデザイン例。 -->
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>鮮やかなメッシュグラデーションのSaaSヒーロー — Vibehaus プレビュー</title>
<style>
:root {
--bg: #07070c;
--ink: #f5f3ee;
--muted: rgba(245, 243, 238, 0.7);
--quiet: rgba(245, 243, 238, 0.5);
--pink: #ff3d8a;
--magenta: #b13cff;
--cyan: #2dd4ff;
--lime: #b4ff39;
--gold: #ffb83a;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
"Yu Gothic", "Meiryo", ui-sans-serif, system-ui, sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
min-height: 100dvh;
overflow-x: hidden;
position: relative;
}
/* Mesh gradient — three radial layers, blurred a touch then composited.
No image is loaded; entire scene is generated by the GPU. */
.mesh {
position: absolute;
inset: 0;
background:
radial-gradient(35% 45% at 18% 22%, rgba(177, 60, 255, 0.7), transparent 70%),
radial-gradient(40% 50% at 82% 18%, rgba(255, 61, 138, 0.6), transparent 70%),
radial-gradient(45% 55% at 70% 88%, rgba(45, 212, 255, 0.45), transparent 70%),
radial-gradient(30% 40% at 18% 82%, rgba(180, 255, 57, 0.3), transparent 70%);
filter: blur(40px) saturate(1.1);
z-index: 0;
pointer-events: none;
}
/* Dot grid + grain. The dots add a "spec sheet" sub-pattern, the grain
tames any bands the blur leaves behind. */
.grain {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
opacity: 0.05;
}
.dotgrid {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image: radial-gradient(rgba(245, 243, 238, 0.06) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: radial-gradient(ellipse 60% 50% at center, #000 30%, transparent 80%);
}
/* Header */
header.site {
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
}
header.site .logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
font-size: 1.05rem;
letter-spacing: -0.01em;
}
header.site .logo::before {
content: "";
width: 22px; height: 22px;
border-radius: 6px;
background: conic-gradient(from 180deg, var(--pink), var(--magenta), var(--cyan), var(--lime), var(--pink));
filter: blur(0.4px) saturate(1.2);
}
header.site nav {
display: flex;
gap: 1.6rem;
font-size: 0.9rem;
color: var(--muted);
}
header.site nav a {
text-decoration: none;
color: inherit;
transition: color 0.2s;
}
header.site nav a:hover { color: var(--ink); }
header.site .login {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(245, 243, 238, 0.08);
border: 1px solid rgba(245, 243, 238, 0.18);
border-radius: 999px;
color: var(--ink);
text-decoration: none;
font-size: 0.86rem;
font-weight: 500;
backdrop-filter: blur(10px);
}
@media (max-width: 720px) {
header.site nav { display: none; }
}
/* Hero */
main {
position: relative;
z-index: 5;
padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 2.5rem) clamp(3rem, 7vw, 6rem);
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 0.85rem;
background: rgba(245, 243, 238, 0.06);
border: 1px solid rgba(245, 243, 238, 0.12);
border-radius: 999px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
backdrop-filter: blur(10px);
margin-bottom: 1.75rem;
}
.eyebrow .led {
width: 7px; height: 7px;
border-radius: 999px;
background: var(--lime);
box-shadow: 0 0 8px var(--lime);
animation: led 2.4s ease-in-out infinite;
}
@keyframes led {
0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--lime); }
50% { opacity: 0.7; box-shadow: 0 0 14px var(--lime), 0 0 0 3px rgba(180, 255, 57, 0.15); }
}
h1 {
font-size: clamp(2.6rem, 7vw, 5.4rem);
line-height: 1.08;
letter-spacing: -0.035em;
margin: 0 0 1.5rem;
font-weight: 700;
}
h1 :lang(ja) { letter-spacing: 0; line-height: 1.3; }
h1 .accent {
background: linear-gradient(120deg, var(--pink) 0%, var(--magenta) 40%, var(--cyan) 80%, var(--lime) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
}
.lede {
max-width: 56ch;
margin: 0 auto 2.25rem;
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: 1.85;
color: var(--muted);
}
.ctas {
display: inline-flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1.5rem;
border-radius: 999px;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
transition: transform 0.2s, background 0.2s, border-color 0.2s;
font-family: inherit;
border: 1px solid transparent;
cursor: pointer;
}
.btn.primary {
background: var(--ink);
color: #07070c;
}
.btn.primary:hover { transform: translateY(-2px); }
.btn.ghost {
background: transparent;
color: var(--ink);
border-color: rgba(245, 243, 238, 0.25);
}
.btn.ghost:hover { border-color: var(--ink); background: rgba(245, 243, 238, 0.06); }
.btn .arr { transition: transform 0.2s; }
.btn:hover .arr { transform: translateX(3px); }
/* Trusted-by strip */
.trusted {
margin-top: clamp(3rem, 6vw, 4.5rem);
padding-top: 2rem;
border-top: 1px solid rgba(245, 243, 238, 0.08);
}
.trusted .label {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--quiet);
margin: 0 0 1.25rem;
}
.trusted ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: clamp(1.5rem, 4vw, 3rem);
opacity: 0.7;
}
.trusted li {
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: 1.15rem;
letter-spacing: -0.02em;
color: var(--ink);
font-style: italic;
}
.trusted li:nth-child(2) { font-style: normal; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.95rem; }
.trusted li:nth-child(3) { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 0.95rem; }
.trusted li:nth-child(5) { font-style: normal; font-weight: 300; font-size: 1.4rem; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* 配布デモの操作先。外部通信・登録・決済は行わない。 */
a:focus-visible { outline: 3px solid #f5f3ee; outline-offset: 4px; }
header nav a, header .logo, header .login { min-height: 44px; display: inline-flex; align-items: center; }
header nav { flex-wrap: wrap; }
.sample-details { position: relative; z-index: 10; color: #f5f3ee; background: #07070c; padding: 32px clamp(20px,4vw,48px); font-family: system-ui,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; line-height: 1.8; letter-spacing: 0; }
.sample-details > p { margin: 0 0 24px; font-size: 13px; }
.sample-sections { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; max-width: 1160px; margin: auto; }
.sample-sections section { border-top: 1px solid currentColor; padding-top: 16px; scroll-margin-top: 24px; min-width: 0; }
.sample-sections h2 { font-size: 18px; line-height: 1.5; margin: 0 0 12px; font-weight: 700; letter-spacing: 0; }
.sample-sections p { font-size: 14px; line-height: 1.8; margin: 0; letter-spacing: 0; }
@media(max-width:720px) { .sample-sections { grid-template-columns: 1fr; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }
</style>
</head>
<body>
<div class="mesh" aria-hidden="true"></div>
<div class="dotgrid" aria-hidden="true"></div>
<div class="grain" aria-hidden="true"></div>
<header class="site">
<div class="logo">Spectra</div>
<nav>
<a href="#product">Product</a>
<a href="#pricing">Pricing</a>
<a href="#docs">Docs</a>
<a href="#updates">Changelog</a>
</nav>
<a class="login" href="#account">Sign in →</a>
</header>
<main>
<span class="eyebrow"><span class="led" aria-hidden="true"></span>BUILD 0.4 · NOW IN BETA</span>
<h1>
Ship faster.<br/>
<span class="accent">Build with light.</span>
</h1>
<p class="lede">Spectra は、リアルタイム同期と AI 補完を組み合わせた次世代の開発環境です。色と光の重なりで、架空の製品の雰囲気を伝えるデザイン例です。</p>
<div class="ctas">
<a href="#account" class="btn primary">無料ではじめる<span class="arr" aria-hidden="true">→</span></a>
<a href="#product" class="btn ghost">デモを見る<span class="arr" aria-hidden="true">↗</span></a>
</div>
<div class="trusted">
<p class="label">Fictional brand examples</p>
<ul>
<li>Helix</li>
<li>NORTH</li>
<li>halflight.io</li>
<li>Atlas</li>
<li>◇</li>
<li>Fieldnote</li>
</ul>
</div>
</main>
<aside class="sample-details" aria-label="デザイン例の説明"><p id="sample-disclaimer">架空の企画・サービスのデザイン例です。完全無料・著作権フリー（CC0）。リンクはこのページ内の説明へ移動します。</p><div class="sample-sections"><section id="product" aria-labelledby="product-heading"><h2 id="product-heading">デモの構成</h2><p>画像を読み込まず、CSSの色面を重ねて背景を作っています。Spectraは架空の開発ツールです。</p></section><section id="pricing" aria-labelledby="pricing-heading"><h2 id="pricing-heading">料金について</h2><p>製品のプランや価格は未設定です。公開するサービスの料金と条件へ差し替えてください。</p></section><section id="docs" aria-labelledby="docs-heading"><h2 id="docs-heading">実装の使い方</h2><p>このHTMLを保存し、色の変数と見出しを変更できます。外部のフォントやライブラリは不要です。</p></section><section id="updates" aria-labelledby="updates-heading"><h2 id="updates-heading">更新履歴について</h2><p>BUILD 0.4はデザイン上の値です。実際の更新情報を掲載するときは変更日と内容を設定します。</p></section><section id="account" aria-labelledby="account-heading"><h2 id="account-heading">登録・ログインについて</h2><p>登録・認証・AI補完・同期機能は実装していません。ここはヒーローの見た目とページ内リンクを試すデモです。</p></section></div></aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
Stripe、Linear、Vercel——2020年代のモダンSaaSは、ある共通の表情を持っています。複数のグラデーションを溶け合わせた、彩度の高い「メッシュ背景」のヒーローです。写真でもイラストでもない、色そのものが主役のこの背景は、いまや「先進的なテック企業」を示す視覚的な合言葉になっています。
色がブランドの第一声になる
ベタ塗りの背景は無難ですが、記憶に残りません。ストックフォトの背景は、どこかで見た既視感を呼びます。メッシュグラデーションは、その中間を埋める——抽象的でありながら、配色の選択にブランドの個性を込められる。訪問者は製品説明を読む前に、まず背景の色からブランドのトーンを受け取ります。色彩そのものが、ヒーローの第一声になります。
軽さという見過ごされがちな利点
メッシュ背景の実装は、画像を一切使いません。複数のラジアル／コニックグラデーションをCSSで重ねるだけ——画像0、JavaScript0で実現できます。
画像 0メッシュ背景は CSS だけで描ける。LCP に直接効く
2〜3枚重ねるラジアルグラデの数。単色コニックより深みが出る
5%ノイズオーバーレイ。グラデの縞（バンディング）を消す
これはLCP（最大コンテンツの描画時間）に直接効く利点です。見た目が華やかなのにページは軽い、という両立が可能で、さらに配色を少し変えるだけで季節キャンペーンやテーマ切り替えにも転用できます。
仕上げの判断軸
メッシュは「重ねる」のがコツです。単色のコニックグラデより、2〜3個のラジアルグラデーションを重ねたほうが深みが出ます。グラデーションには縞（バンディング）が出やすいので、5%程度のノイズオーバーレイで消すこと。
背景が華やかな分、テキストは引き算します。白で抜き、彩色するのはH1の2行目だけ。文字と背景のコントラストは WCAG AA 以上を必ず実測してください。
ヒーローの構成要素
使いどころ
- 開発者向けSaaS / インフラ系プロダクトのトップ
- スタートアップの調達直後・ローンチ告知
- 今っぽさでブランド差別化したいB2C SaaS
- 既存ヒーローが地味で離脱率が高いとき
このデザインの分類
背景と狙いどころ
よくある質問
画像は本当に不要ですか？
はい。すべて CSS の radial-gradient と conic-gradient、SVG ノイズのインライン data URI で実装します。OG・サムネ生成時もスクリーンショットだけで完結します。
AdSenseと色衝突しませんか？
ヒーロー直下に広告は置かず、コンテンツ間に挟むことを推奨。グラデ自体は彩度を抑えれば広告色とぶつかりにくいです。
グラデーションの色選びのコツは？
隣接する2色を同系色（例：マゼンタ→パープル）、対岸2色を補色（例：シアン→ライム）にすると、混色領域が濁らず鮮やかに見えます。色数は最大4色まで。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
ヴェイパーウェイヴの夕焼けグリッド
マゼンタ・パープルの夕焼けに地平線まで伸びるレトログリッド、大理石像、ローマン書体の日本語タイポを重ねるヴェイパーウェイヴ系ヒーロー。80s ノスタルジーとインターネット黎明期の美学が融合した尖った表現。
霧の風景ヒーロー
藍色の山と霧の生成背景に、日本語の見出しと淡い緑のボタンを重ねたヒーロー。PCは横長、スマホは縦長の画像に切り替え、暗いグラデーションで文字を読みやすくする。画像入りのHTMLも無料で配布。
透明ボディの90年代ヒーロー
青い透明樹脂の音楽プレーヤーを主役に、暗い背景と黄緑のボタンを組み合わせた製品紹介。90年代の小さなウィンドウ枠と生成画像の質感を使い、商品を見る操作と仕様を読む操作を分ける。