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

グラデーションの種類

角度（度）

形状

カラーストップ

CSS出力

CSSグラデーションとは？

CSSグラデーションを使うと、画像ファイルを使わずに2色以上の間でなめらかな色の移行を表示できます。3つの種類があります：linear-gradient（直線に沿って）、radial-gradient（中心点から放射状に）、conic-gradient（中心点を軸に回転）。グラデーションは背景、ボタン、オーバーレイ、装飾要素に使われます。

CSSグラデーションジェネレーターの使い方

スウォッチからプリセットを選ぶか、独自のグラデーションを設定してください。
グラデーションの種類を選択：linear、radial、またはconic。
角度（linear/conicの場合）または形状（radialの場合）を調整します。
カラーストップを編集 — 色と位置（0–100%）を変更します。
必要に応じてカラーストップを追加または削除します。
CSSをコピーしてスタイルシートに貼り付けます。

よくあるご質問

透明なグラデーションを作成するにはどうすればよいですか？ アルファチャネルが0のrgba()またはhsla()色値を使用して、完全な透明性を実現します。例えば、rgba(0,0,0,0)の色停止点は完全に透明な黒で、画像上のフェードアウトオーバーレイに便利です。

ハード色停止点（遷移なし）を作成するにはどうすればよいですか？ 同じ位置に2つの色停止点を配置します。1つは終了し、もう1つはその点で開始します。例えば、赤50％、青50％は中点での赤から青への瞬間的な切り替えを作成し、グラデーション遷移はありません。

どのブラウザが円錐グラデーションをサポートしていますか？ 円錐グラデーションはすべての最新ブラウザでサポートされています（Chrome 69+、Firefox 83+、Safari 12.1+、Edge 79+）。Internet Explorerではサポートされていません。

同じ要素で複数のグラデーションを使用できますか？ はい。CSSの背景はコンマ区切りのレイヤーリストを受け入れます。グラデーションを積み重ね、背景画像と組み合わせ、各レイヤーの位置とサイズを独立して制御できます。

Keywords: CSSグラデーションジェネレーター, リニアグラデーション, ラジアルグラデーション, コニックグラデーション, CSS背景ジェネレーター, グラデーションカラーピッカー, CSSグラデーションツール