CSSグラデーション作成 — 線形・放射グラデーション

使い方

1. 線形または放射グラデーションを選びます。
2. 開始色と終了色を選びます。
3. 線形グラデーションでは角度を設定し、2つのカラーストップの位置を0〜100%の範囲で調整します。
4. プレビューを確認し、CSSを要素のスタイルルールにコピーします。

カラーストップと方向

色は6桁の16進数形式で出力します。最初のストップより前は最初の色が続き、2つ目のストップより後は2つ目の色が続きます。その間が色の変化する領域です。開始位置を終了位置より大きくすることはできません。

線形グラデーションは選んだ角度に沿って変化します。放射グラデーションは radial-gradient(circle, ...) を使い、中心から外側へ広がります。放射モードでは角度の設定は使いません。最終的な要素の寸法がプレビューと異なると、色の見え方の分布も変わることがあります。

例

• linear-gradient(90deg, #6366f1 0%, #ec4899 100%) は左の紫から右のピンクへ変化します。
• 両方のストップを50%にすると、2色の間にくっきりした境界ができます。
• 放射モードで最初のストップを25%に動かすと、混ざり始める前の中心の単色部分が大きくなります。

結果の適用

生成される宣言は background ショートハンドを使うため、同じ要素の他のbackgroundプロパティがリセットされることがあります。スタイルシートに貼り付ける前に、既存のルールを確認してください。

このツールは不透明な2色に対応しています。ストップを増やしたり透明色を使ったりする場合は、コピーしたCSSを別途編集してください。グラデーションの上に文字を載せる場合は、片方の端の色だけで判断せず、文字の背後にある各部分のコントラストを確認してください。プレビューは背景の見た目を示すもので、完全なアクセシビリティチェックではありません。生成はブラウザー内で行います。