CSSグラデーションジェネレーター｜リアルタイム

直線方向に色を遷移させます。方向（"to right"・"45deg"など）と2つ以上のカラーストップを指定します。方向を省略すると"to bottom"（上から下）になります。例: background: linear-gradient(to right, #6366f1, #22c55e) は左から右へインジゴ→緑のグラデーションを生成します。

中心点から外側に向かって放射状に色を遷移させます。形状（circle/ellipse）・サイズキーワード・中心位置・カラーストップを指定します。例: radial-gradient(circle at center, #6366f1, #1e1b4b)。スポットライト効果、光彩ボタン、奥行き表現に適しています。

中心点を軸に色が回転する円錐状グラデーションです。2021年以降の全モダンブラウザでサポートされています。例: conic-gradient(red, yellow, green, blue, red)。円グラフ・ドーナツグラフ・カラーホイールをCSSだけで実装できます。

同じ位置に2つのカラーストップを置くと境界がシャープになります（例: linear-gradient(to right, blue 50%, red 50%)で半々の2色分割）。repeating-linear-gradient()などの繰り返しバリアントはパターンを敷き詰め、ストライプ・チェッカーボード・キャンディストライプをCSSだけで作れます。

background: gradient(...)を設定し、-webkit-background-clip: textと-webkit-text-fill-color: transparentを追加すると、グラデーションがテキスト形状に切り抜かれます。例: background: linear-gradient(90deg, #6366f1, #22c55e); -webkit-background-clip: text; -webkit-text-fill-color: transparent。全モダンブラウザで動作します。

background-imageプロパティでカンマ区切りにすることで、複数のグラデーションと背景画像を1つの要素に重ねられます。宣言の左から前面に配置されます。radial-gradientのオーバーレイをlinear-gradientのベースに重ねるなど複雑な表現が可能です。

linear-gradientとradial-gradientは99%以上のブラウザで対応。conic-gradientはChrome 69+・Firefox 83+・Safari 12.1+で95%以上をカバー。フォールバックとして background-color を先に宣言することで、非対応ブラウザでも単色表示にグレースフルデグレードできます。

グラデーション値を直接CSSトランジションで変化させると毎フレーム全体を再描画するため、特にモバイルでジャンクが発生します。代わりにグラデーションを持つ疑似要素のopacityをアニメーションするか、CSS @propertyルールでカスタムプロパティを登録してハードウェアアクセラレーションを利用してください。

グラデーション上のテキストはコントラスト問題が発生しやすい点に注意が必要です。グラデーションの最も明るい箇所と最も暗い箇所の両方でテキスト色とのコントラスト比を確認してください。WCAG 2.1 AAは通常テキストで4.5:1以上を要求します。長文テキストにはグラデーション上への直置きを避け、単色または半透明の背景を使用してください。