グラデーション CSS
CSS グラデーションジェネレーター（中間色付き）
2 色の CSS 線形グラデーションを作成し、角度を調整して background の CSS をコピー。なめらかな中間色も書き出せます。
135°
グラデーション CSS
background: linear-gradient(135deg, #6366F1, #EC4899);段階
使い方
背景、カード、ヒーローセクションに使える実用的なグラデーションを作ります。2 色を選んで方向を回転させ、最終的な CSS をプレビューし、グラフやフォールバック用のトークンとして段階パレットもコピーできます。
- 1 開始色と終了色を選びます。
- 2 グラデーションの角度を設定します。
- 3 CSS グラデーションまたは中間色をコピーします。
よくある質問
どんな CSS が生成されますか？
選んだ 2 色と角度を使った linear-gradient() の background 宣言を生成します。
中間色を個別にコピーできますか？
はい。段階パレットは個別の HEX でも、リスト全体でもコピーできます。
グラデーションもコントラストを確認すべき？
はい。グラデーション上の文字は、関係する最も明るい部分と暗い部分の両方で確認しましょう。
グラデーションはサーバーで生成されますか？
いいえ。プレビューと CSS は、選んだ値からブラウザ内で生成されます。