CSSグラデーション生成器

CSS グラデーションはブラウザがその場で描画する「画像」で、background や background-image に指定するだけで使え、画像ファイルのダウンロードが不要で拡大してもぼやけません。線形グラデーションは linear-gradient(角度, カラーストップ1, カラーストップ2, …) と書きます。0deg は下から上、90deg は左から右、既定の 180deg は上から下で、135deg は人気の左上から右下への斜めです。radial-gradient は中心から外へ広がり、スポットライトや光彩、ボタンの立体感に向いています。

カラーストップは色と位置の組み合わせで、#f59e0b 0%、#10b981 100% のように書きます。間にストップを追加すると変化のリズムを調整でき、2 つのストップを同じ位置（50% と 50% など）に置くと色が瞬時に切り替わり、くっきりしたストライプや分割背景になります。このツールでは各ストップの位置と不透明度を個別に変更でき、不透明度は rgba() で出力されます。写真の上に重ねて白文字を読みやすくするオーバーレイに便利です。

実践的なコツをいくつか紹介します。広い面のグラデーションで両端の色相が離れすぎていると中間がくすんだ灰色になりやすいので、中間色を足すか近い色相を選びましょう。淡いグラデーションは画面によって段階状の縞（バンディング）が見えることがあり、色の差を少し広げるか 3 つ目のストップを加えると改善します。グラデーション文字は、背景にグラデーションを設定し background-clip: text と color: transparent を組み合わせます。

主要ブラウザは何年も前からプレフィックスなしの linear-gradient と radial-gradient に対応しているため、コピーした CSS は -webkit- なしでそのまま使えます。プリセットから始めて角度とストップを調整し、ライブプレビューで確認したらワンクリックでコピーしてください。