CSS グラデーションライブラリは webgradients.com から厳選された 180 種類の線形グラデーションをまとめたコレクションです。各グラデーションは円形プレビューで表示され、ワンクリックで CSS をコピーできます。すべてのグラデーションは個人・商用問わず無料で使用できます。ゼロから設計せずに既製のグラデーションをすぐに使いたいときの出発点として役立ちます。

180 のグラデーションをナビゲートする

ページ上部に 180 個の小さなサムネイルが並んでいます。任意のサムネイルにホバーすると名前が表示され、クリックするとそのカードに直接スクロールします。スタイルが決まっている場合、ページ全体をスクロールするよりも速く見つけられます。

各カードにはグラデーションを構成する個別の hex カラースウォッチも表示されます。任意のスウォッチをクリックするとその色の値だけをコピーでき、CSS 全体をコピーする必要はありません。

コピーされる CSS とその変更方法

コピーされるコードは次のような形式です：

background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

コピー後によく行う変更：

/* 角度を変更 — 0° = 下から上、90° = 左から右、180° = 上から下 */
background-image: linear-gradient(180deg, #667eea 0%, #764ba2 100%);

/* 画像オーバーレイ用に半透明にする */
background-image: linear-gradient(135deg, rgba(102,126,234,0.8) 0%, rgba(118,75,162,0.8) 100%);

/* グラデーションテキスト効果 */
background-image: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

古いブラウザとの互換性のために、background-image の前にソリッドカラーのフォールバックを追加します：

background: #667eea;
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

グラデーション背景上のテキスト可読性

広い明度範囲にまたがるグラデーション（例：白から濃い紫）は、一部の位置でテキストが読みにくくなることがあります。グラデーションを変えずにテキストの下に半透明の暗いオーバーレイを追加することで解決できます：

background-image:
  linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
  linear-gradient(135deg, #667eea 0%, #764ba2 100%);

このライブラリ vs. グラデーションエディター

このライブラリは 180 種類の固定プリセットを提供します — 既製品を選ぶときに便利です。カスタムグラデーションをゼロから設計したり、複数のグラデーションレイヤーをスタックしたり、OKLCH などの現代的な色空間を使いたい場合は、このサイトの CSS グラデーションエディターツールを使用してください。