CSSグラデーション生成機

CSSグラデーション関数のしくみ

CSSのグラデーションは画像ファイルではなく、ブラウザが描画時に計算して作る「生成画像」です。そのため background やbackground-image に指定でき、解像度に関係なく鮮明で、追加のファイル読み込みも発生しません。よく使う形は次の3つです。

• linear-gradient: 直線に沿って色が変化します。ボタン、バナー、セクション背景の定番です。
• radial-gradient: 1点から外側へ円形・楕円形に広がります。スポットライトや穏やかなビネットに向いています。
• conic-gradient: 中心点のまわりを角度に沿って一周します。円グラフ、カラーホイール、金属的な質感に使われます。

基本形は linear-gradient(角度, 色1, 色2) です。色のあとに 40% のように位置を付けると、その地点で色が100%の強さになります。省略すると等間隔に配置されます。 隣り合う2色の位置を同じにすると、なめらかな変化ではなくくっきりした縞模様になります。

角度と方向キーワードの対応表

角度は時計回りに増え、0度が上向き、90度が右向きです。つまり 90deg では1色目が左、最後の色が右に来ます。角度を省略した場合の既定値はto bottom(180度)です。

to top right のような角キーワードは要素の縦横比に合わせて角度が変わるため、長方形では正確な45度にはなりません。どのサイズでも同じ傾きにしたいときは数値の角度を使います。

色の選び方で気をつけること

既定では、ブラウザは2色の間をRGB値で直線的に補間します。青とオレンジのように色相環で反対側にある色を混ぜると、中間がくすんだ灰色になりがちです。 その場合は自分で中間色を1つ足すか、色相環で近い色を選ぶと澄んだグラデーションになります。本ツールの「3色目を使う」はそのための機能です。 新しいブラウザでは linear-gradient(in oklch, ...) のように補間する色空間を指定する書き方もありますが、対応状況は変わり続けているため、実際に使う前に対象ブラウザを確認してください。

組み合わせに迷ったら、カラーパレット生成機で候補を作り、HEX・RGB・HSLの変換が必要なときはカラーコード変換機を使うと便利です。

検算つきの例: 金色から濃紺へ

このページの初期値は #c9a961(金色)と #1a1a2e(濃紺)です。RGBの平均で求めた中間色は #726248 です。 3色それぞれの上に白文字・黒文字を載せたときのコントラスト比を、WCAGの相対輝度の式で計算すると次のとおりです。

金色側では黒文字、濃紺側では白文字が読みやすいことが分かります。問題はその中間です。グラデーションは1つの要素の中で背景の明るさが連続的に変わるため、文字がどこに載るかで読みやすさが変わります。 文字をグラデーションに載せる場合は、最も不利な地点(多くは中間)のコントラスト比で判断してください。この例の中間色では白文字が5.91:1、黒文字は3.56:1なので白が無難で、金色の端は白文字だと2.25:1しかありません。 より細かい確認はコントラストチェッカーでできます。

用途別の設計のヒント

• ボタン: 上から下(180度)へ、明るい色からやや暗い色へ変えると立体感が出ます。明るさの差は小さくしないと、ラベルの片側が読みにくくなります。
• ヒーローバナー: 135度前後の斜めは、画面の縦横比が変わっても自然に見えます。見出しは最も暗い側(または明るい側)に寄せてコントラストを確保します。
• カード・区切り: 同じ色相で明度だけを少し変える2色が最も安定します。目立つ対比色はアクセント1か所に絞りましょう。
• スポットライト: radialで中央を明るく、周辺を暗くすると視線が中央に集まります。
• 円グラフ・カラーホイール: conicで色の位置を%で指定するとドーナツ状の区間を描けます。開始角度は from 90deg のように指定します。

生成されたコードの読み方

background: linear-gradient(90deg, #c9a961, #8a6d3b, #1a1a2e); は「左から右へ、金色、褐色がかった金、濃紺の順に変わる」と読みます。3色なら各色は0%・50%・100%に置かれます。 これを #c9a961 0%, #8a6d3b 30%, #1a1a2e 100% に書き換えると、中間色が左に寄り、明るい区間が短く、暗い区間が長くなります。 出力の先頭に付く background: #c9a961; は、グラデーションを解釈できない環境のための代替色で、次の行が有効ならそちらで上書きされます。

よくある失敗と対処

• 文字が見えない: 全体に同じ文字色を使うと、どこかの端でコントラストが崩れます。文字の裏に半透明の暗いオーバーレイを敷くか、文字が載る側に色を寄せてください。
• 縞(バンディング)が見える: 似た2色を広い面積に塗ると階段状の縞が出ることがあります。色の差を少し広げるか、ごく薄いノイズ画像を重ねると目立ちにくくなります。
• スマホで背景が崩れる: 長いページでの background-attachment: fixed は、一部のモバイルブラウザで無視されたり重くなったりします。固定レイヤーを別に用意してください。
• 画像との重なり順: background にカンマ区切りで複数指定すると、先に書いたものが上に重なります。写真の上にグラデーションを重ねるなら、グラデーションを先に書きます。
• 代替色の書き忘れ: 古い環境を考慮するなら、グラデーションの前に単色の background を1行置きます。本ツールのコードにも開始色の代替行が入ります。

結果の活用方法

コピーしたコードは、スタイルシートの background(または background-image)の値としてそのまま貼り付けられます。同じグラデーションを複数箇所で使うなら、--brand-gradient のようなCSS変数に一度だけ定義して使い回すと、色の変更が1行で済みます。文字自体にグラデーションをかける効果はbackground-clip: text と透明な文字色を組み合わせる別の手法なので、このツールの出力を元に追記して応用できます。その場合も、最も明るい部分と暗い部分の両方が背景と十分なコントラストを持つか確認してください。

このツールの限界

このツールは2〜3色を等間隔で配置します。色の位置(%)、繰り返しグラデーション、円の中心位置やサイズなどの細かい指定には対応していません。必要なら生成コードに 40% やat top left を手で書き足してください。色の入力はブラウザ標準のカラーピッカーを使うため、透明度(アルファ)は指定できません。

よくある質問