CSSグラデーション生成の使い方｜linear・radialをプレビューしながらbackgroundを作る

公開日：2026年7月17日更新日：2026年9月2日運営：シルギア（Analyzegear, Inc.）対象ツール：CSSグラデーション生成

ボタンやヘッダー、カードの背景をグラデーションで彩りたいとき、色と角度を頭の中だけで組み立てて何度も書き直すのは骨が折れます。CSSグラデーション生成は、色・位置・角度をスライダーで動かしながら結果をその場でプレビューし、そのまま貼り付けられるbackgroundのCSSを1行で出力するツールです。画像を使わずに背景の色変化を表現できるので、ページの読み込みも軽く保てます。ここでは実際の機能に沿って、仕組みと使い方、そして失敗しやすい点を具体例つきで解説します。

このツールでできること

本ツールは、色をなめらかに変化させる背景CSSを、次の範囲で組み立てられます。

linear（線形）とradial（放射）の2種類を切り替えられます。radialはcircle（円形）で生成されます。
linearは角度を0〜360degのスライダーで指定し、色が変化する向きを決められます。radialのときは角度欄は表示されません。
各色に0〜100%の位置（カラーストップ）を設定でき、その色がもっとも濃く出る場所を調整できます。
基本は2色で、「3色目を使う」をオンにすると3色まで扱えます。
調整するたびにプレビューが更新され、下部のbackgroundのCSS1行を「CSSをコピー」ボタンで貼り付けられます。

出力の形は、linearならbackground: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);、radialならbackground: radial-gradient(circle, ...); のようになります。

角度（deg）の考え方

linearの角度は、色が変化していく向きを表します。本ツールでは0degが下から上、90degが左から右、180degが上から下、270degが右から左です。つまり数字が示すのは「色2へ向かって進む矢印の向き」だと考えると分かりやすいでしょう。

斜め方向にしたいときは45degや135degが便利です。45degは左下から右上へ、135degは左上から右下へと色が流れます。たとえば90degのサンセット配色を135degに変えるだけで、同じ2色でも斜めに流れる印象へ切り替わります。上下方向（0degや180deg）は落ち着いた背景に、斜め方向は動きのある見出し帯に向きます。

カラーストップ（位置%）の読み方

位置（%）は、その色がもっとも濃く出る場所です。色1を0%・色2を100%にすると、左端が色1、右端が色2になり、その間がまんべんなくなめらかに変化します。

ここで重要なのは、2つの位置の「間」だけで色が混ざるという点です。たとえば色1を40%、色2を60%にすると、0〜40%は色1の単色、60〜100%は色2の単色になり、変化するのは中央の20%幅だけです。境界をくっきり見せたいときは位置を近づけ、全体でなだらかに変化させたいときは0%と100%まで離します。位置を色2のほうが小さい値になるよう入れ替えても、本ツールはそのまま出力します。

3色とプリセットの使い分け

「3色目を使う」をオンにすると、中間色を1つ挟めます。たとえば赤0%・黄50%・青100%のように置くと、虹のように複数色が連なる背景になります。中央の色の位置を30%や70%へずらせば、どちらか一方の色を広く見せることもできます。3色は華やかですがまとまりにくいので、キャンペーンバナーなど「あえて目立たせたい」場面に向いています。

手早く仕上げたいときは、サンセット・オーシャン・パープル・ミント・レインボー・ナイトのプリセットが使えます。クリックすると色・角度・種類・3色目の有無までまとめて反映されるので、これを土台に一部だけ微調整すると効率的です。ナイトはradial、レインボーは3色linearというように、種類の見本にもなります。

用途別の作り方の目安

目的に合わせて次のように組むと、狙った質感を出しやすくなります。

ボタン：linearで角度を上下方向（0degや180deg）にし、明るい色から少し暗い色へ変化させると、押せそうな立体感が出ます。
ヘッダーやヒーロー：左右や斜めのlinearで2色をなめらかにつなぐと、写真なしでも華やかな帯になります。
カードやアイコンの下地：radialで中心を明るく外側を濃くすると、スポットライトのような効果が得られます。

よくある失敗と注意点

意図と違う見え方になるときは、まず位置（%）を確認します。2色を40%・60%のように寄せていると、多くの領域が単色になり「グラデーションが効いていない」と感じやすくなります。全体で色を回したいときは0%・100%に広げてください。

また、本ツールが対応するのはcircle形状のradialと、単一方向のlinearです。楕円（ellipse）指定や角度状のconic-gradient、複数のグラデーションを重ねる表現には対応していないため、これらが必要な場合は生成したCSSを土台にして手動で書き足してください。色と角度をその場で確かめられるのが最大の利点なので、まずは2色で向きと位置を動かし、気に入った組み合わせをコピーして背景に取り入れてみてください。

「CSSグラデーション生成」を使ってみる →