DEV · GRADIENT
CSSグラデーション
色と角度を決めるとCSSコードとプレビューを即表示します。
- 1.開始色と終了色の2色を選びます
- 2.線形(linear)または放射状(radial)の種類を選びます
- 3.線形のときは角度スライダーで方向を調整します
- 4.右側でプレビューを確認し、生成された CSS コードをコピーします
→ 生成物: グラデーションのプレビューとコピー用の CSS background コード
プレビュー
CSSコード
background: linear-gradient(135deg, #3d2566, #b69cff);
このツールについて
2 色と角度を選ぶと、そのまま貼り付けられる CSS の `linear-gradient` コードを生成します。結果を見ながら色と向きを調整できるため、コードを直して再読み込みする往復が減ります。
こんなときに
- —ボタンやバナーの背景グラデーションを決めてコードに落とすとき
- —ブランドカラー 2 色をつないだヘッダー背景を試すとき
- —角度だけ変えてどの向きが自然か見比べるとき
知っておきたいこと
- —2 色の線形グラデーションのみ生成します。放射状（radial）や 3 つ以上のカラーストップには対応しません。
- —彩度が大きく異なる 2 色をつなぐと中間ににごった灰色の帯が出ることがあります。明度の近い色同士のほうがきれいに混ざります。
- —生成されるコードは標準 CSS で、ベンダー接頭辞なしで最新ブラウザに使えます。