本文へスキップ
  1. Web BENTO CSS
  2. カテゴリ一覧
  3. グラデーション
01 / GRADIENT 12 パーツ

CSSグラデーション見本 12選

コピペで使えるCSSグラデーションのサンプル集。背景・文字・枠線・アニメーションまで、シャッフルで配色と角度のバリエーションを試せます。表示中のプレビューとコードは常に一致するので、気に入ったらそのままコピーしてください。クラス名は .bnto-grad-sunset 形式です。

該当するパーツが見つかりませんでした。

サンセット

.bnto-grad-sunset {
  background: linear-gradient(
    134deg,
    hsl(28 96% 62%),
    hsl(6 92% 60%),
    hsl(334 86% 64%)
  );
}
使い方のコツ

ヒーローエリアの背景に使うなら、上に置く文字は白がおすすめ。色は3つとも近い色相でまとめると濁らずきれいにつながります。

オーシャン

.bnto-grad-ocean {
  background: linear-gradient(
    135deg,
    hsl(202 72% 56%),
    hsl(187 84% 53%)
  );
}
使い方のコツ

2色だけのシンプルなグラデーションは失敗しにくい定番。信頼感を出したいコーポレート系サイトや、クールな印象のバナー背景に向いています。

抹茶

.bnto-grad-matcha {
  background: linear-gradient(
    135deg,
    hsl(96 52% 64%),
    hsl(122 46% 51%)
  );
}
使い方のコツ

緑系は彩度を抑えめ（50%前後）にすると上品にまとまります。オーガニック・食品・和風テイストのサイトと好相性です。

グレープ

.bnto-grad-grape {
  background: linear-gradient(
    135deg,
    hsl(279 90% 75%),
    hsl(265 45% 56%)
  );
}
使い方のコツ

明るい紫→暗い紫のように同系色で明度差をつけると、立体感のあるリッチな背景になります。テック系・AI系のサービスで人気の配色です。

Gradient

テキストグラデ

.bnto-grad-text {
  background: linear-gradient(120deg,
    hsl(44 98% 58%), hsl(14 100% 60%), hsl(330 70% 56%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
使い方のコツ

color: transparent が無いと文字色が優先されてグラデが見えません。background-clip: text とのセットが必須です。太いフォント（weight 800以上）にかけると色の変化がよく見えます。

アニメグラデ

.bnto-grad-animated {
  background: linear-gradient(120deg,
    hsl(8 92% 60%), hsl(44 100% 55%),
    hsl(202 80% 56%), hsl(8 92% 60%));
  background-size: 300% 300%;
  animation: bnto-shift 6s ease infinite;
}
@keyframes bnto-shift {
  0%   { background-position: 0% 50% }
  50%  { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
使い方のコツ

@keyframes の定義まで含めてコピーしてください（無いと動きません）。最初と最後を同じ色にするとループの継ぎ目が自然に。@media (prefers-reduced-motion: reduce) でアニメを止める配慮も推奨です。

メッシュ

.bnto-grad-mesh {
  background:
    radial-gradient(at 20% 20%, hsl(44 100% 55%), transparent 50%),
    radial-gradient(at 80% 0%,  hsl(8 92% 60%), transparent 50%),
    radial-gradient(at 70% 90%, hsl(334 86% 64%), transparent 50%),
    radial-gradient(at 10% 80%, hsl(202 80% 56%), transparent 50%);
  background-color: hsl(28 96% 62%);
}
使い方のコツ

複数の radial-gradient を重ねた「メッシュグラデーション」。at 20% 20% が光の中心位置です。位置をずらすだけで表情がガラッと変わるので、要素のサイズに合わせて微調整してみてください。

枠グラデ

ボーダーグラデ

/* linear-gradient(#fff,#fff) は中身の塗り色。白以外の背景では変更 */
.bnto-grad-border {
  border: 3px solid transparent;
  border-radius: 16px;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(120deg,
      hsl(44 98% 58%), hsl(14 100% 60%), hsl(330 70% 56%));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
使い方のコツ

2枚の背景を重ねて「枠線だけグラデ」を実現する小技。1枚目の linear-gradient(#fff,#fff) は中身の塗りつぶし色なので、白以外の背景に置くときは実際の背景色に変えてください。background-origin と background-clip の2行も必須です。

朝焼け

.bnto-grad-dawn {
  background: linear-gradient(
    160deg,
    hsl(32 100% 82%),
    hsl(343 95% 70%),
    hsl(270 55% 65%)
  );
}
使い方のコツ

空のグラデーションを再現するなら角度は 160〜180deg（ほぼ縦方向）が自然。淡い色なので上に置く文字は濃色にするとコントラストを確保できます。

ピーチ

.bnto-grad-peach {
  background: linear-gradient(
    135deg,
    hsl(30 100% 81%),
    hsl(349 92% 77%)
  );
}
使い方のコツ

明度80%前後のパステルグラデーションは、上に濃い文字を置いてもきちんと読めるのが強み。お知らせバナーやカード背景など、面積の大きい場所に安心して使えます。

オーロラ

.bnto-grad-aurora {
  background: linear-gradient(
    135deg,
    hsl(168 72% 58%),
    hsl(205 82% 58%),
    hsl(284 64% 64%)
  );
}
使い方のコツ

緑→青→紫と色相環を一方向に進む配色は、色数が多くても濁りません。逆方向（緑→赤系）に飛ぶと中間が茶色っぽく濁るので注意。

トワイライト（ダーク系）

/* ダーク系。白文字と好相性 */
.bnto-grad-twilight {
  background: linear-gradient(
    160deg,
    hsl(240 56% 34%),
    hsl(285 60% 46%),
    hsl(334 82% 58%)
  );
}
使い方のコツ

暗い色から始まるグラデはフッターやCTAセクションの背景に最適。白文字とのコントラストが確保しやすく、ネオングロー系のボタンとも好相性です。

CSSグラデーションの基礎知識

CSSグラデーションは画像を一切使わずに、コードだけで色のなだらかな変化を描ける機能です。画像と違ってファイルの読み込みが発生しないため表示が速く、どれだけ拡大してもぼやけません。このページでは、コピペでそのまま使えるCSSグラデーションの見本を12種類掲載しています。背景に敷く定番の配色から、文字グラデ・枠線グラデ・動くグラデーションまで、CSSタブのコードをスタイルシートへ、HTMLタブのコードをページへ貼り付けるだけで完成します。

グラデーションには3つの書き方があります。直線的に色が変わる linear-gradient、中心から円状に広がる radial-gradient、時計回りに色が回転する conic-gradient です。Webサイトの背景づくりで最もよく使うのは linear-gradient で、このページの見本も大半がこの1行で書けるものです。クラス名は .bnto-grad-〇〇 という独自プレフィックス付きなので、既存サイトのCSSと衝突しにくくなっています。

グラデーション配色のコツ

きれいなグラデーション背景を作る一番の近道は、色相環で近い色同士（30〜60度差）をつなぐこと。オレンジ→ピンク、青→水色のような組み合わせは失敗しません。離れた色をつなぐ場合は、オーロラのように中間色を1つ挟むと濁りを防げます。各カードの「シャッフル」を押すと配色の組み合わせを何度でも試せるので、気に入ったパターンをそのままコピーしてください。

角度と色停止点のカスタマイズ

向きは先頭の 135deg を書き換えるだけ。90deg で左→右、180deg で上→下に流れます。また各色の後ろに hsl(28 96% 62%) 30% のように色停止点（％）を付けると、色の切り替わる位置を自由に調整できます。

文字グラデは color: transparent を忘れずに

文字にグラデーションをかけるときは background-clip: text と color: transparent が必ずセット。どちらかが欠けるとグラデーションが表示されません。Safari 対応のため -webkit-background-clip: text も併記しておくと安全です。

よくある質問

グラデーションの色を自分のサイトの色に変えるには？
linear-gradient() のカッコ内に並んでいる色コードを書き換えるだけです。hsl() のほか #ff5a4d のような16進カラーもそのまま使えます。各カードの「シャッフル」ボタンを押すと配色の組み合わせをその場で試せて、コードも自動で書き換わります。
グラデーションの向き（角度）はどうやって変えますか？
linear-gradient() の最初にある 135deg などの角度を変更します。90deg で左から右、180deg で上から下に流れます。to right や to bottom right のようなキーワード指定も使えます。
文字にグラデーションをかけたのに色が表示されません。
color: transparent; と background-clip: text; の2つがセットで必要です。特に color: transparent が抜けると文字色が優先されてグラデーションが見えません。Safari 対応のため -webkit-background-clip: text; も一緒に書いてください。
商用サイトで利用できますか？
はい、すべてのパーツは商用・個人を問わず無料で利用できます。登録やクレジット表記も不要です。
このページのパーツはAIコーディングツールでも使えますか？
はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「オーシャン」）を伝えるだけで適用を指示できます。AIがWebを読めない場合は、「コピー」ボタンで取得したHTMLとCSSをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に表示確認することをおすすめします。

関連カテゴリ

グラデーションと組み合わせて使いやすいパーツはこちら。

テキストエフェクト 背景パターン 影・グラス ボタン