CSSグラデーション生成器
2色と角度でCSS線形グラデーションコードを作成します。
入力
例の値が入力されています。直接確認するか、値を変更してみてください。
入力はブラウザで処理されます。再読み込みすると例の値に戻ります。
結果
入力された例値を直接使用して結果を確認するか、値を変更してみてください。
6桁のHEX色2つを使用します。結果をCSS background属性に貼り付けしてください。
結果を共有
ツールリンクと結果テキストを一緒に共有します。結果にはURLを入れません。以下の内容を確認して共有してください。
計算・変換基準
2色でCSS線形グラデーションコードを作成します。
linear-gradient(角度deg, 開始色, 終了色)
入力例
#000000 → #ffffff、90度
90度は左から右へ進むグラデーションです。開始色と終了色を入力すると、background属性に適用できるCSSのみになります。
使用方法
- 入力された例値を使用するか、開始HEX、終了HEX、角度（度）項目を変更してください。
- 結果を確認を押して下の結果を確認してください。
- 必要なら、結果をコピーして取り出すことができます。
よくある質問
0度と180度はどちらの方向ですか？
CSSでは0degは上向き、180degは下向きです。このツールは2つの不透明な色のみを使用し、中間色や複数の色は出力コードで別途調整する必要があります。
計算基準と参考資料
- W3C — CSS Images
linear-gradient()の方向と色点