【2026年版】CSSグラデーションのコピペサンプル12選｜おしゃれな配色パターン集

コピペで使える!厳選 CSS グラデーション 12 選

CSS グラデーションを使いたいけれど、「どんな色の組み合わせが良いのかわからない」「おしゃれな配色が思いつかない」と悩んでいませんか？

この記事では、すぐに使える実用的なグラデーションパターンを 12 種類厳選してご紹介します。用途別に分類しているので、あなたのプロジェクトに合ったグラデーションがきっと見つかるはずです。

この記事の使い方とコードのコピー方法

各グラデーションには、以下の情報を掲載しています。

用途: どんな場面で使うのがおすすめか
CSS コード: そのままコピペできるコード
カラーコード: 使用している色の詳細

コードブロック内の CSS をコピーして、あなたのプロジェクトの.cssファイルに貼り付けるだけで使用できます。クラス名は自由に変更してください。

基本的な使い方については、CSS グラデーションの基礎記事も合わせてご覧ください。

【ビジネス向け】プロフェッショナルなグラデーション 4 選

企業サイトやコーポレートサイト、ビジネスツールの UI に最適な、落ち着いた印象のグラデーションです。

1. クールなブルー系グラデーション

用途: ヘッダー背景、メインビジュアル、信頼感を演出したいセクション

CSS

.gradient-cool-blue {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

カラー: #667eea（明るい青紫） → #764ba2（深い紫）

知的で洗練された印象を与える定番の配色です。テクノロジー企業や SaaS 製品のサイトでよく使われています。

2. 信頼感のあるネイビー系グラデーション

用途: フッター、サイドバー、CTA ボタン

CSS

.gradient-navy {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}

カラー: #1e3c72（ダークネイビー） → #2a5298（明るいネイビー）

深みのある青系グラデーションは、信頼性や安定感を表現できます。金融機関や法律事務所、コンサルティング会社のサイトに最適です。

3. 高級感のあるダークグレー系

用途: プレミアムプラン紹介セクション、高級商品の背景

CSS

.gradient-dark-premium {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

カラー: #2c3e50（ダークグレー） → #34495e（チャコールグレー）

モノトーンに近い落ち着いたグラデーションです。高級感や重厚感を演出したいときに効果的。白文字との相性が抜群です。

4. 爽やかなスカイブルー系

用途: 医療・福祉サイト、教育機関サイト、清潔感を出したいセクション

CSS

.gradient-sky-blue {
  background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
}

カラー: #89f7fe（明るい水色） → #66a6ff（爽やかなブルー）

清潔感と安心感を与える明るいブルー系です。医療系、教育系、ヘルスケア関連のサイトで特に効果的です。

【ポップ】鮮やかで目を引くグラデーション 4 選

若年層向けサービスやエンターテインメント系、クリエイティブなプロジェクトに適した、鮮やかなグラデーションです。

5. サンセット風オレンジ × ピンク

用途: ヒーローセクション、キャンペーンページ、イベント告知

CSS

.gradient-sunset {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

カラー: #fa709a（ピンク） → #fee140（明るいイエロー）

夕焼けを思わせる温かみのあるグラデーションです。ポジティブで活気のある印象を与え、注目を集めたいコンテンツに最適です。

6. トロピカルなグリーン × ブルー

用途: 夏のキャンペーン、旅行サイト、アウトドア関連コンテンツ

CSS

.gradient-tropical {
  background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%);
}

カラー: #0ba360（鮮やかなグリーン） → #3cba92（ターコイズ）

自然や爽快感をイメージさせる配色です。エコ製品、旅行サービス、スポーツ関連のサイトにぴったりです。

7. ビビッドな紫 × ピンク

用途: 美容・コスメサイト、ファッション系 EC、女性向けサービス

CSS

.gradient-vivid-purple {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

カラー: #f093fb（明るい紫） → #f5576c（コーラルピンク）

華やかで女性的な印象を与えるグラデーションです。美容系、ファッション系、ライフスタイル系のコンテンツで人気の配色です。

8. エネルギッシュな赤 × オレンジ

用途: セールバナー、緊急告知、アクションを促す CTA ボタン

CSS

.gradient-energetic {
  background: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);
}

カラー: #ff6a00（鮮やかなオレンジ） → #ee0979（鮮やかなピンク）

情熱的でエネルギッシュな印象を与えます。期間限定セールやキャンペーンなど、強くアピールしたいコンテンツに効果的です。

【モダン】2026 年トレンドのグラデーション 4 選

最新のデザイントレンドを取り入れた、現代的なグラデーションパターンです。

9. グラスモーフィズム対応の半透明グラデーション

用途: モーダルウィンドウ、カード型 UI、オーバーレイ

CSS

.gradient-glassmorphism {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

カラー: rgba(255, 255, 255, 0.1) → rgba(255, 255, 255, 0.05)

ガラスのような質感を表現できる、2026 年のトレンドデザインです。backdrop-filterと組み合わせることで、背景がぼやけた洗練された効果が得られます。

10. メッシュグラデーション風の複雑配色

用途: 背景デザイン、アートディレクション重視のサイト

CSS

.gradient-mesh {
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 25%,
    #f093fb 50%,
    #4facfe 75%,
    #00f2fe 100%
  );
}

カラー: 5 色を使用した複雑なグラデーション

複数の色を使った現代的なグラデーションです。Apple の製品ページなどで見られる、多色使いの洗練されたスタイルを再現できます。

11. ダークモード対応グラデーション

用途: ダークモード UI、夜間表示モード、目に優しいデザイン

CSS

.gradient-dark-mode {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

カラー: #1a1a2e（ダークブルー） → #16213e（深いネイビー）

ダークモードに最適な、暗めのトーンで構成されたグラデーションです。目の疲れを軽減しながら、モダンな印象を与えます。

12. ミニマルなモノトーングラデーション

用途: シンプルなデザイン、テキスト重視のコンテンツ、ポートフォリオサイト

CSS

.gradient-minimal {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

カラー: #f5f7fa（ライトグレー） → #c3cfe2（明るいブルーグレー）

主張しすぎない、繊細なグラデーションです。コンテンツを邪魔せず、上品な雰囲気を演出できます。ミニマルデザインのサイトに最適です。

グラデーションをもっと効率的に作成する方法

ここまで 12 種類のグラデーションサンプルを紹介してきましたが、実際のプロジェクトでは「この配色をベースに、少し色を調整したい」という場面が多いのではないでしょうか。

色コードを手動で変更して、ブラウザでリロードして確認、また調整...という作業は、意外と時間がかかります。

そんな時に便利なのが、グラデーションジェネレーターツールです。

CSSグラデーションジェネレーター

最大5色対応！カンタン操作で誰でもCSSグラデーションを作成できます。linear gradient, radial gradient対応。コードをワンクリックでコピー。

playcraft の CSS グラデーションジェネレーターなら、カラーピッカーで直感的に色を選び、リアルタイムでプレビューを確認しながら調整できます。角度や色の位置も視覚的に操作できるため、理想のグラデーションを素早く作成できます。

完成したらワンクリックで CSS コードをコピーできるので、制作効率が大幅に向上します。

次回の記事では、グラデーションジェネレーターツールの比較と使い方を詳しく解説しますので、ぜひご期待ください！

まとめ: グラデーションを使いこなしてワンランク上のデザインへ

この記事では、実用的な CSS グラデーション 12 パターンを用途別に紹介しました。

ビジネス向け: 信頼感・落ち着きを重視
ポップ: 鮮やかで活気のある印象
モダン: 2026 年のトレンドを反映

これらのサンプルをそのまま使っても良いですし、色を調整してオリジナルのグラデーションを作るのもおすすめです。

グラデーションは、Web デザインに深みと洗練さを加える強力なテクニックです。ぜひ積極的に取り入れて、ワンランク上のデザインを目指してください！

CSSグラデーションとは？初心者でも5分でわかる基本の作り方

CSSグラデーションの基本をゼロから解説。linear-gradientの書き方、色指定、角度設定までコピペで使えるサンプルコード付き。初心者必見の完全ガイド!

CSSグラデーションジェネレーター5選比較｜時短で美しい配色を作る方法

手書きより10倍速い!CSSグラデーションジェネレーターを徹底比較。無料で使える人気ツール5選の特徴と使い方を初心者向けに解説します。

CSSグラデーション上級テクニック｜アニメーション・テキスト適用・複雑表現の実装方法

CSSグラデーションの応用技術を徹底解説。動くグラデーション、文字への適用、マルチカラー表現など、ワンランク上の実装テクニックをコード付きで紹介。

最後まで読んでいただき、ありがとうございました。