グラデーションジェネレーター

デザイナーやフロントエンド開発者が画面デザインを実装へ渡す前には、グラデーションジェネレーターが役立ちます。CSSの線形グラデーションを作成します。

CSSの線形グラデーションを作成します。アカウントを作成せずブラウザーで無料で利用でき、表示された結果を十分に確認してから次の作業へ進めます。

サンプルでは45度の角度を使い、開始色に非常に濃い青、終了色に強い緑を指定しています。生成後に、得られた行とイメージしていたものを比較してください。角度が方向を決め、色の順序が両端の色合いを決めます。

入力

45
#0F172A
#16A34A

出力

background: linear-gradient(45deg, #0F172A, #16A34A);

グラデーションはブラウザー内で生成されます。角度と2つの色はデバイス上に残り、何も送信されず、ページを離れると何も保存されません。そのため、コピーするスニペットはすべて自分のマシン上で作られます。

はい。その行は線形グラデーションの標準構文に従っており、どの background 宣言にも収まります。そのままコピーし、後でパレットが変わった場合だけ色を変更してください。

角度を少しずつ動かし、最初の色が要素の上部に来る値にします。結果はページを再読み込みして確認するため、通常は1、2回試せば希望の方向になります。

このページは開始色と終了色から始まるため、3色のブレンドをここで直接設定することはできません。それでも最初の2色を生成し、追加のストップを自分のスタイルシートで手作業で加えることはできます。