CSSグラデーションジェネレーター：プレビューと一緒に

使い方

色の停止点は、グラデーションに沿って0%から100%までの位置にある色です。エディタは停止点を位置の順に書くので、入力した順序は絵を変えません。2から6個の停止点なら、グラデーションは読みやすく、CSSも短いままです。

コードは、現在のブラウザが読む標準的なCSSの構文です。プレビューは同じ値からブラウザが描くので、見えているものがスタイルシートに渡されるものです。

日の出のプリセットは角度135degの線形グラデーションで、左上から右下へ向かいます。停止点は3つで、0%のオレンジ、50%の黄色、100%のピンクです。

得られるCSSは次の通りです：background: linear-gradient(135deg, #f97316 0%, #facc15 50%, #ec4899 100%);

線形グラデーションの0degはどういう意味ですか？

0degは上を指すので、その角度では色が下から上へ変わります。角度は時計回りに回り、90degは左から右へ、180degは上から下へ進みます。

コードの停止点の順序が入力と違うのはなぜですか？

CSSは停止点を書かれた順に読むので、コードは停止点を位置の順に書きます。80%を20%より先に入力しても、コードでは20%が先に示されますが、絵は変わりません。

透明な色を使えますか？

このエディタは、16進数で書いた不透明な色を受け付けます。透明度が必要な場合は、コードを手で編集して、アルファ値をもつ色を使ってください。

色の停止点は何個まで使えますか？

2個から6個までです。エディタは数をその範囲に保つので、グラデーションには必ず始まりと終わりがあります。

このコードはすべてのブラウザで動きますか？

構文は、現在のブラウザが対応している標準の形式です。古いバージョンの利用者がいる場合は、訪問者が使うブラウザで結果を確かめてください。

作ったデザインは送信されますか？

いいえ。グラデーションはブラウザの中で作られます。何も保存もサーバーへの送信もされません。

グラデーションを文字の色に使えますか？

このツールが書くのは背景の宣言だけです。文字をグラデーションで塗ることもできますが、このツールが書くより多くのCSSが必要です。

数値と文章の最終確認日：2026年11月10日火曜日。