無料CSSグラデーションジェネレーター オンライン

CSS グラデーション は、背景、ボタン、カードを飾る最も軽量で柔軟な方法になりました。画像エディターからPNGを書き出す必要はなく、ブラウザが色の間の遷移をベクターで計算し、数十バイトで実現します。 CSSグラデーションジェネレーター は Volade が、画面上で編集中に正確なコード — 角度、ストップ、原点位置 — を生成します。

linear-gradient：方向性のあるグラデーション

関数 linear-gradient() は角度とストップを受け取ります：linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)。角度 0deg は上、 90deg は右、 180deg は下を向きます。角度を指定しない場合、ブラウザは上から下に進行します。ヘッダー、CTAボタン、セクションバナーで最も多く使われる構文です。

radial-gradient：ハローと楕円

関数 radial-gradient() は一点（デフォルトは中心）から始まり、円または楕円に広がります。原点は at X% Y% と表記：radial-gradient(circle at 50% 50%, …)。タイトル背後のハロー効果、中央を狙ったヒーロー背景、合成のソフトシャドウに最適。XとYの2つのスライダーで原点をピクセル単位で配置できます。

conic-gradient：一点の周りの回転

関数 conic-gradient() は時計の針のように一点の周りを回転します。conic-gradient(from 90deg at 50% 50%, …) と書き、リング、円形ゲージ、カラフルなボーダー、プリズム効果を作れます。各ストップが角度セクターを占め、複数の色を置いて画像なしでCSSの円グラフを描けます。

カラーストップ（color stops）

各 ストップ は色とパーセント位置を関連付けます：#7a2fe2 0%, #a358ee 55%, #f3e8ff 100%。2色に同じ位置を指定すると はっきりした遷移 （ハードエッジ）が生まれ、離れた位置ほど滑らかなフェードに。2つを超えるストップで多色パレット、バンド、素材のシミュレーション（金属、真珠、オーロラ）も表現できます。

グラデーションの重ね合わせとフォールバック

短縮プロパティ backgroundでは順序が重要：手前が先です。写真の上に暗いベールを置く場合は background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);。常に 単色 をフォールバック（background-color）として、古いブラウザ向けや画像の読み込み中に用意してください。

パフォーマンスのベストプラクティス

CSSグラデーションはリサイズのたびに再計算されます。ストップ数は適切に（90%の場合は2〜5で十分）、モバイルでの巨大な領域への多重重ね合わせは避けましょう。安定した 16進またはHSL 値を選び、デザインが固まったら角度を固定して、ブラウザ間の微細な差を防いでください。

Voladeブランドカラーのグラデーション

グラデーション展開の前に一貫したパレットを作るには、 パレットジェネレーター と カラーピッカー を使ってください。ブランドの色相を見つけて、ここにストップとして貼り付けます。結果はCSS、デザインシステム、テーマへ直接コピーでき、PCでもモバイルでも、アカウントなし・データ送信なしで使えます。