CSSグラデーション作成

CSSグラデーション作成とは？

CSSグラデーションは、画像ファイルを使わずCSSのコードだけで2色以上がなめらかにつながる背景を作る機能です。ボタンやバナー、カードの背景などに使われ、画像より軽く、どの画面サイズでもくっきり表示されます。

このジェネレーターでは角度ダイヤルやカラーバーを直接ドラッグすると、プレビューとlinear-gradient・radial-gradient・conic-gradientのコードが同時に変わります。

使い方

1. 線形・円形・扇形からグラデーションの種類を選びます。
2. 線形と扇形はダイヤルを回すか、スライダーや数値で角度を決めます。円形は形と中心の位置を選びます。
3. カラーバーの丸をドラッグして位置を変え、バーの空いている所か+ 色を追加で色を増やします。下のリストで色と位置（%）を正確に入力することもできます。
4. 仕上がったらCSSをコピーを押してスタイルシートに貼り付けます。

グラデーションの種類と書き方

線形グラデーションの角度は、0degが下から上（↑）、90degが左から右（→）、180degが上から下（↓）です。色の後ろの%はその色がそのまま表示される位置で、2色を同じ位置に置くと境界がくっきり分かれたストライプを作れます。

デザインのコツ

• 彩度の高い補色同士を混ぜると、中間がくすんだグレーになりがちです。色相環で近い2色を使うか、間に明るい色をもう1つ入れてみてください。
• グラデーションの上に文字を置くときは、一番明るい部分と暗い部分の両方で読みやすいか確認しましょう。カラーコード変換ツールのコントラスト比チェックが使えます。
• CSSコードの1行目background: 単色;は、とても古いブラウザ向けの代替色です。