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

CSSのlinear-gradientやradial-gradientを、コードを書かずに作れるツールです。カラーピッカーで色を選び、スライダーで角度や位置を調整しながら、プレビューで結果を確認できます。完成したCSSコードはワンクリックでコピーして、そのままプロジェクトで使用できます。

グラデーションの基本

CSSグラデーションは、複数の色を滑らかに混ぜ合わせる表現で、backgroundプロパティで指定します。単色の背景より奥行きが出るため、ヘッダーやカード、ボタンなどでよく使われています。

主なタイプは2種類あります：

• 線形グラデーション: 直線に沿って色が変化（左から右、上から下など）
• 放射状グラデーション: 中心から外側に向かって円形・楕円形に色が広がる

主な機能

グラデーションタイプの選択

線形と放射状を切り替えられます。線形では0〜360度で角度を指定でき、よく使う角度（0°、45°、90°、180°、270°）はプリセットボタンから選択可能です。放射状では円形と楕円形から形状を選べます。

カラーストップの管理

最大8色まで追加でき、それぞれの位置を0〜100%の範囲で調整できます。「均等ポジション」ボタンを使えば自動で等間隔に配置され、その後スライダーで個別に微調整することも可能です。

リアルタイムプレビュー

変更を加えるとすぐにプレビューに反映されるため、試行錯誤しながらデザインを進められます。完成したらCSSコードをコピーして、プロジェクトに貼り付けて使用します。

使い方

画面左側のコントロールでグラデーションタイプ・角度・形状を選択し、カラーストップで色と位置を調整します。右側のプレビューエリアで仕上がりを確認したら、生成されたCSSコードをコピーして使用できます。

線形グラデーション

直線に沿って色が変化するタイプで、角度を指定して方向を決めます。

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

角度の指定
0度は上方向、90度は右方向、180度は下方向を指します。プリセットボタンで大まかな角度を選んでから、スライダーで1度単位の微調整が可能です。

カラーストップ
各色の開始位置をパーセンテージで指定します。たとえば#667eea 0%は左端から青が始まり、#764ba2 100%は右端まで紫が続きます。

放射状グラデーション

中心から外側に向かって円形・楕円形に色が広がるタイプです。

background: radial-gradient(circle, #667eea 0%, #764ba2 100%);

形状の選択
円形（circle）は正円として描画され、楕円形（ellipse）は要素の縦横比に応じた楕円になります。背景の形状に合わせて使い分けると自然な仕上がりになります。

美しいグラデーションを作るコツ

色の選び方

色相環で近い色同士（青から紫、黄色からオレンジなど）を組み合わせると、自然で馴染みのある仕上がりになります。明度の差を大きくすると立体感が生まれ、彩度の高い色を使うとエネルギッシュな印象を与えられます。

角度で印象をコントロール

• 90度（横方向）: シンプルで落ち着いた印象
• 45度・135度（対角線）: 動きのあるダイナミックな印象
• 180度（縦方向）: 上下の流れを強調したいとき

カラーストップの調整

3色以上を使う場合、まず「均等ポジション」で等間隔に配置してから、強調したい部分だけ手動で調整すると効率的です。色を急激に変化させたい場合は、隣接する2色の位置を近づけます。

使用例

ヘッダー背景やカード、ボタンのホバー効果など、様々な場面で活用できます。

/* ヘッダー背景 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* カード背景 */
background: radial-gradient(circle at top left, #fa709a 0%, #fee140 100%);

ブラウザ対応

現代のブラウザはすべてCSSグラデーションに対応していますが、古いブラウザのために代替色を指定しておくことをおすすめします。

background: #667eea; /* 代替色 */
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

グラデーションに対応していないブラウザでは、1行目に指定した単色が表示されます。