CSS グラデーションを作る方法

2026-04-07 · 5 分で読めます

CSSグラデーションを使うと、画像ファイルなしで滑らかな色の遷移を作成できます。画像より軽く、どんな画面サイズにも完璧にスケールし、カスタマイズも簡単です。装飾的なグラデーションは、同等のJPGやPNGと比べて20から100 KBを節約でき、画質を損なうことなくどんな解像度にもスケールします。

CSSグラデーションの種類

線形グラデーション(linear-gradient): 直線に沿って色が遷移します(上から下、左から右、または任意の角度)。

background: linear-gradient(135deg, #667eea, #764ba2);

放射状グラデーション(radial-gradient): 中心点から円形または楕円形のパターンで色が外側に広がります。

background: radial-gradient(circle, #667eea, #764ba2);

円錐グラデーション(conic-gradient): カラーホイールのように、中心点の周りで色が回転します。

background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);

ビジュアルにグラデーションを作成する手順

グラデーションの種類を選ぶ: 線形または放射状を選び、角度や位置を設定します。
カラーストップを追加する: クリックしてグラデーション上の異なる位置に色を追加します。各色とその位置を調整します。
CSSをコピー: 生成されたコードをコピーして、スタイルシートに貼り付けます。

ビジュアルジェネレーターを使う方が、特に複数のカラーストップを試しているときには、手書きで構文を書くよりも速いです。

CSSグラデーションの簡単な歴史

CSSグラデーションが存在する前、Webデザイナーはグラデーション効果のために背景画像を使うしかありませんでした。1列のGIFを横方向にタイル状に並べたり、Photoshopの PSDを複数のJPGにスライスしたり。これは機能しましたが、ファイルサイズ、ネットワークリクエスト、ズーム時のピクセル化を増やしました。

WebKitは2009年6月のSafari 4で最初の-webkit-gradient()実装を、冗長で読みにくい構文として追加しました。Firefox 3.6(2010年1月)は-moz-linear-gradient()で続きました。CSS Working Groupは2012年のCSS Image Values Level 3でプレフィックスなしのlinear-gradient()とradial-gradient()を標準化し、その時点でブラウザのプレフィックスは消え始めました。

円錐グラデーション(conic-gradient())はずっと後にやってきました。最初にChrome 69(2018年9月)で出荷され、Safari 12.1(2019年3月)までにすべての主要ブラウザに到達しました。これにより、それまでは画像なしでは不可能だった視覚パターン(円グラフ、カラーホイール、市松模様、サンバーストパターン)が実現可能になりました。

CSSグラデーションは現在、ベースラインのブラウザ機能と見なされています。あなたが欲しいほぼどんなグラデーション効果も、画像やJavaScriptなしにCSSで実現可能です。

よく使われるグラデーションパターン

ヒーローセクションの背景: 2色の控えめなグラデーションは、テキストを邪魔せずに奥行きを加えます。

background: linear-gradient(135deg, #0f172a, #1e3a5f);

ボタンのハイライト: わずかなグラデーションでボタンが立体的に感じられます。

background: linear-gradient(180deg, #3b82f6, #2563eb);

画像へのオーバーレイ: グラデーションのオーバーレイは、写真上のテキストの可読性を向上させます。

background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

アクセントボーダー: 視覚的な面白さのために、グラデーションをボーダーとして使います。

border-image: linear-gradient(90deg, #667eea, #764ba2) 1;

アニメーションメッシュグラデーション: 複数の放射状グラデーションを重ね、位置をアニメーションさせます。

background:
  radial-gradient(at 20% 30%, #667eea 0%, transparent 50%),
  radial-gradient(at 80% 70%, #764ba2 0%, transparent 50%),
  #0f172a;

グラスモーフィズムの背景: 低不透明度のグラデーションをbackdrop-filterのblurと組み合わせます。

background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
backdrop-filter: blur(10px);

カラーストップの位置指定

デフォルトでは、カラーストップは均等に配置されます。各色が現れる場所を制御するために、位置を上書きできます:

/* 中央60%が黄色、端は赤にフェード */
background: linear-gradient(90deg, red 0%, yellow 20%, yellow 80%, red 100%);

ハードストップを使って、アンチエイリアスなしでストライプや幾何学的パターンを作ることもできます:

/* 遷移なしの2色ストライプ */
background: linear-gradient(45deg, #667eea 50%, #764ba2 50%);

コツは、2つのカラーストップを同じ位置に置くことです。ブラウザはそれらの間を補間しないため、鋭いエッジが生まれます。

グラデーション、単色、画像の使い分け

単色: 主要なサーフェスの背景(カード、モーダル、ナビゲーション)に最適です。予測可能で読みやすい。
CSSグラデーション: 装飾的な背景、ヒーローセクション、ボタンのホバー状態、オーバーレイ効果に最適です。ファイルサイズが軽く、スケーラブルで、アニメーション可能。
背景画像(JPG/PNG): 写真的な背景や、グラデーションでは再現できない複雑なアートワークに最適です。
SVGグラデーション: グラデーションをアイコンやイラストの一部として必要とするとき、特にグラデーションがSVGの形状とともにスケールする必要がある場合に最適です。

よくあるパターンは、3つすべてを重ねることです。単色のベース、CSSグラデーションのオーバーレイ、その上に低不透明度のテクスチャ画像。

よくある落とし穴

滑らかなグラデーションでのバンディング: 8ビットカラーディスプレイ(古いモニター、一部のモバイル画面)では、似た色を持つ滑らかなグラデーションが目に見えるバンド(縞)を示すことがあります。控えめなノイズテクスチャのオーバーレイを追加すると、この不具合が軽減されます。
グラデーション角度の混乱: linear-gradient(0deg, ...)は下から始まって上に進みます。linear-gradient(90deg, ...)は左から右へ、linear-gradient(180deg, ...)は上から下へ。角度はグラデーションが流れる「向かう先」を示し、出発点ではありません。
多数のストップによるパフォーマンス低下: 20以上のカラーストップを持つグラデーションはGPUメモリを多く使い、モバイルでスクロールを遅くすることがあります。メッシュグラデーション効果には、3から5のストップで、ずっと良いパフォーマンスとほぼ同じ視覚結果が得られることがよくあります。
グラデーション上のテキストのコントラスト: グラデーションの最も明るい部分でよく読めるヘッダーが、最も暗い部分では読めなくなることがあります。安全策としてtext-shadowプロパティや暗いテキストアウトラインを使いましょう。
古いブラウザの互換性: IE11や非常に古いモバイルブラウザをサポートする必要がある場合、円錐グラデーションは利用できません。線形と放射状のグラデーションはモダンなブラウザのすべてで動作します。
RTL言語でのグラデーション方向: アラビア語やヘブライ語のレイアウトで左から右へのグラデーションは、読者の視点では逆方向に流れます。両方向でテストするか、CSS論理プロパティを使いましょう。

使いこなしのヒント

控えめに保つ: 最高のグラデーションはほとんど目立ちません。2つの似た色のわずかなシフトが奥行きを加えます。派手なレインボーグラデーションがプロフェッショナルに見えることはまずありません。
画像の代わりにグラデーションを使う: CSSグラデーションはネットワークリクエストゼロで瞬時に読み込まれます。可能な限り、装飾的な背景画像をグラデーションに置き換えましょう。
ダークモードでテストする: 明るい背景で素晴らしく見えるグラデーションが、ダークモードでは色あせたり衝突したりすることがあります。各テーマで異なるグラデーションを定義することを検討しましょう。
テキストのコントラストに注意する: グラデーション上にテキストを配置する場合、最も明るい部分や最も暗い部分だけでなく、グラデーション全体にわたってテキストが読めることを確認しましょう。
色空間を意識した構文を使う: linear-gradient(in oklch, #667eea, #764ba2)はデフォルトのsRGB補間よりも滑らかな知覚的遷移を生み出します。Chrome 113以降、Safari 16.4以降、Firefox 113以降で対応しています。
DevToolsで確認する: ChromeとFirefoxのDevToolsは、Stylesパネルでグラデーション値にマウスを乗せると、ビジュアルなグラデーションエディタを表示します。既存のグラデーションを微調整する最速の方法です。

プライバシー

CSSグラデーションジェネレーターは完全にブラウザ内で動作します。選んだ色、試したグラデーション設定、生成したCSSはすべてデバイス上に留まります。テレメトリも、利用追跡も、デザイン選択のアップロードもありません。デザイン探索中に使うツールにとってはこれが重要です。試している色やパターンが、未公開のブランド方針、未発表の製品テーマ、NDA下のクライアントワークを露呈する可能性があるからです。ブラウザ専用の生成は、それらすべてをあなたのマシン上に保ちます。

よくある質問

CSS グラデーションはすべてのブラウザで動作しますか?

はい。線形と放射状のグラデーションは Chrome、Firefox、Safari、Edge を含むすべての最新ブラウザでサポートされています。円錐状グラデーションは比較的新しいですが、現行バージョンならどれでも動作します。

色を 2 つより多く使えますか?

はい。CSS グラデーションは好きなだけカラーストップを受け付けます。各ストップで色とグラデーション上の位置を定義できます。

グラデーションはパフォーマンスに影響しますか?

いいえ。CSS グラデーションはブラウザでレンダリングされ、画像ファイルよりはるかに軽量です。追加のダウンロードなしに任意の画面サイズへ完璧にスケールします。

グラデーションをアニメーションできますか?

background プロパティ自体への CSS トランジションでは直接動かせませんが、background-position をアニメーションするか、@property と CSS カスタムプロパティを使うことで滑らかなグラデーションアニメーションを作れます。