CSSグラデーション生成の使い方｜linear・radialをプレビューしながらbackgroundを作る
公開日：2026年7月17日 対象ツール：CSSグラデーション生成
ボタンやヘッダー、カードの背景をグラデーションで彩りたいとき、色や角度を頭の中で組み立てて何度も書き直すのは手間がかかります。CSSグラデーション生成は、色・位置・角度をスライダーで調整しながら結果をその場でプレビューし、そのまま貼り付けられるbackgroundのCSSを1行で出力するツールです。画像を使わずに背景の色変化を表現できるため、読み込みも軽く保てます。
Web制作者の方が「この配色でどう見えるか」をすぐ確かめたいときに向いています。ここでは、実際の機能に沿って使い方と便利な場面を紹介します。
このツールでできること
- linear（線形）とradial（放射）の2種類のグラデーションを生成できます。
- linearでは角度を0〜360degのスライダーで指定し、色の変化する向きを決められます。
- 各色に0〜100%の位置（カラーストップ）を設定でき、色が最も濃く出る場所を調整できます。
- 基本は2色、「3色目を使う」をオンにすると3色まで扱えます。
- 調整に合わせてプレビューがリアルタイムで更新され、生成されたbackgroundのCSSをコピーできます。
使い方
- まず種類として「線形（linear）」か「放射（radial）」を選びます。
- linearを選んだ場合は、角度のスライダーで向きを指定します。角度は0degが下から上、90degが左から右、180degが上から下、270degが右から左を表します。radialのときは角度欄は表示されません。
- 色1・色2のカラーピッカーで色を選び、それぞれの位置をスライダーで動かします。位置を近づけると境界がくっきりし、離すとなだらかに変化します。
- 3色にしたいときは「3色目を使う」にチェックを入れ、色3と位置を設定します。
- プレビューを確認しながら、下部に表示されるbackgroundのCSSを「CSSをコピー」ボタンでコピーし、スタイルシートに貼り付けます。
こんなときに便利
ボタンの装飾に使うと、単色よりも立体感や質感が出ます。linearで角度を上下方向にし、明るい色から少し暗い色へ変化させると、押せそうな印象のボタン背景になります。
ヘッダーやヒーローエリアの背景では、左右や斜め方向のlinearで2色をなめらかにつなぐと、写真を使わずに華やかな見出し帯を作れます。カードやアイコンの下地には、radialで中心を明るく外側を濃くすると、スポットライトのような効果が得られます。
また、赤・黄・青のように中間に色を挟んだ3色グラデーションは、キャンペーン用のバナー背景など、あえて目を引きたい場面で活躍します。
よくある質問
linearとradialの違いは何ですか。
linearは指定した角度に沿って直線状に色が変化します。radialは中心から外側へ円形（放射状）に広がります。本ツールのradialはcircle形状で生成されます。
色の位置（%）は何を表しますか。
その色が最も濃く出る位置です。たとえば色1を0%、色2を100%にすると左端が色1、右端が色2になり、その間がなめらかに変化します。位置を入れ替えても、そのまま出力されます。
楕円やconic、複数重ねには対応していますか。
本ツールはcircle形状のradialと単一方向のlinearに対応しています。楕円指定や角度状（conic）、複数のグラデーションを重ねる表現には対応していないため、必要な場合は生成したCSSを土台に手動で書き換えてください。
色と角度をその場で確かめられるので、配色の試行錯誤がぐっと楽になります。まずは2色で向きと位置を動かし、気に入った組み合わせをコピーして、あなたのサイトの背景に取り入れてみてください。