本文へ移動

CSSグラデーション生成

2〜4個のカラーストップで線形または放射グラデーションを作成します。

グラデーション設定

ブラウザー内で処理します。

2〜4の整数。

0〜360度。線形で使用。

0〜100%。放射で使用。

0〜100%。放射で使用。

不透明な3桁または6桁HEX。

0は透明、1は不透明。

0〜100%。昇順に入力。

不透明な3桁または6桁HEX。

0は透明、1は不透明。

0〜100%。昇順に入力。

不透明な3桁または6桁HEX。

0は透明、1は不透明。

0〜100%。昇順に入力。

不透明な3桁または6桁HEX。

0は透明、1は不透明。

0〜100%。昇順に入力。

生成したグラデーション

グラデーションを設定してからCSSを生成してください。

CSSグラデーションの作り方

明示したカラーストップから、繰り返さない背景画像を生成します。

  1. 線形または放射を選びます。
  2. 2〜4個のストップを選びます。
  3. 色、不透明度、位置を入力します。
  4. 角度または中心を設定します。
  5. 生成し、見本とCSSを比べてコピーします。

CSS構文

linear-gradientは直線に沿い、0degは上向きです。radial-gradient(circle at X% Y%)は指定中心から広がります。

カラーストップ

位置は0〜100%で昇順にします。同じ位置を隣接させると境界が鋭くなり、半透明色はrgbaで出力します。

確定状態

入力を変えると古いCSS、コピー状態、見本を消します。再生成すると現在値を適用します。

対応範囲

  • 繰り返し、ドラッグ、プリセット、色提案、アニメーションは非対応。
  • 文字を載せる場合はコントラストを別に確認。

例

linear-gradient(90deg, #FF0000 0%, #0000FF 100%).

radial-gradient(circle at 25% 75%, #FFFFFF 0%, #000000 100%).

よくある質問

同じ位置を使えますか？

はい。鋭い色の切り替えになります。

ベンダープレフィックスは出ますか？

いいえ。現行の標準構文だけを出力します。