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

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

CSSグラデーションジェネレーターは、CSSの linear-gradient・radial-gradient・conic-gradient を視覚的に編集するためのツールです。手作業でカラーストップを書く必要はなく、トラック上で色をドラッグし、プレビューが更新されるのを確認しながら、そのままスタイルシートに貼り付けられるCSSをコピーできます。

モダンなUIでグラデーションは至るところに登場します。ヒーローセクション、カードのオーバーレイ、ボタンのステート、グロウエフェクト、ダークモードの微妙な色味、ローディングスケルトン、装飾的なボーダーなど。手書きで書ける力があれば作業は速くなりますが、アイデアを試行錯誤するフェーズではビジュアルジェネレーターに勝るものはありません。

CSSのグラデーションには3種類あります。*Linear* は任意の角度で直線方向に色が流れるタイプ。*Radial* は中心点から円や楕円状に放射されるタイプ。*Conic* は時計の針のように中心を軸として色が回るタイプです。それぞれ得意な用途があり、1つの背景に複数のグラデーションを重ねて使うこともできます。

グラデーションを設計しながら学べること

• グラデーションは *方向（または形状）* と *カラーストップ*（位置を指定できる色）で定義されます。
• 同じ位置に2つのカラーストップを置くと *ハードエッジ* ができ、ストライプや背景の分割に使えます。
• oklch のようなモダンな色空間を使うと、rgb や hsl よりも知覚的に均一で滑らかなグラデーションになります。

CSSグラデーションを作る手順

1. 1

   グラデーションの種類を選ぶ

   直線的に色を流すなら linear、円形にフェードさせるなら radial、中心を軸に色を回したいなら conic を選びます。

2. 2

   角度や位置を設定する

   linear なら角度を度数で指定します（CSSでは 0deg が下から上方向です）。radial と conic では中心位置を指定します。

3. 3

   カラーストップを追加して並べる

   好きな数だけ色を追加できます。各ストップをトラック上でドラッグして位置を調整します。同じ位置に2つ置けばハードエッジになります。

4. 4

   実物に近い形でプレビュー

   幅広のヒーロー、カード、ボタンを切り替えて、アスペクト比の違いでグラデーションの見え方がどう変わるかを確認します。

5. 5

   CSSをコピーする

   そのまま使える background 宣言をコピーして、自分のスタイルシートに貼り付けるだけです。

CSSグラデーション クイックリファレンス

3つのグラデーション関数と、その中で使うパーツのまとめ。詳しい仕様はMDNを参照: linear-gradient、radial-gradient、conic-gradient。

試してみたいCSSグラデーションの例

.hero {  background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}

.card {  background:    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%),    #1f2230;}

.stripes {  background: repeating-linear-gradient(    45deg,    #1a1a1a 0 12px,    #2a2a2a 12px 24px  );}

CSSグラデーションでありがちなミス

• カラーストップを増やしすぎる ― 3〜4色で十分なケースが多く、それ以上はかえって濁った印象になりがちです。
• CSSのグラデーションでは 0deg が下から上方向だということを忘れる（多くのデザインツールの「0°＝右」とは違います）。
• コントラストの強いグラデーションの上にテキストを乗せるとき、両端での可読性をチェックし忘れる ― WCAGのコントラスト比を意識しましょう。

CSSグラデーションのよくある質問