無料グラデーション壁紙ジェネレーター

カスタムグラデーション壁紙を作成およびダウンロードします。

データはデバイスを離れません
45°

グラデーションについて

CSSグラデーションを使用すると、画像なしで滑らかなカラートランジションを作成でき、ファイルサイズを削減し、パフォーマンスを向上させます。このツールは、壁紙として使用するPNGファイルとサイトで再利用可能なCSSコードの両方を生成します。

よくある質問

線形、放射状、円錐グラデーションの違いは?

線形グラデーションは指定された角度で直線に流れます。放射状グラデーションは中心点から放射状に広がります。円錐グラデーションは、カラーホイールのように中心点を中心に回転します。それぞれ異なる視覚効果を生成します。

サイトでCSSグラデーションを使用できますか?

はい!CSSグラデーションはすべての最新ブラウザでサポートされており、画像を必要としません。あらゆるサイズに適応し、より速く読み込まれ、あらゆる画面で鮮明に表示されます。このツールで生成されたCSSをスタイルシートにコピーします。

デバイスに最適な解像度は?

デスクトップモニターは通常1920×1080を使用し、ノートパソコンは異なり、4K画面は3840×2160、iPhoneは1080×1920、iPadは2048×2732を使用します。完璧に鮮明な壁紙を得るには、デバイスに対応する解像度を選択します。

ウェブのグラデーション、短い歴史

グラデーションは印刷とエアブラシに長いデジタル以前の歴史を持つ。ある色から別の色へのスムーズな傾斜としての「グラデーション」の語彙は、19世紀後半の石版印刷とエアブラシポスターアートから直接来ている；バウハウスのデザイン学生は、どのピクセルもスクリーンに映す前の1920年代に色調傾斜の練習をした。

デジタルグラデーションは1990年代初頭に2つの隣接した瞬間に登場した。Adobe Photoshop 1.0（1990年2月）は最初からグラデーションツールを搭載し、前景色と背景色のスウォッチ間を線形および放射状のフォールオフで補間する「ブレンド」アルゴリズムを提供した。Adobe PostScript Level 2（1991年）はシェーディングパターンをファーストクラスの言語機能として導入した；それまでPostScript Level 1にはネイティブにグラデーションを表現する方法がなく、段階的な灰色の帯状フィルで偽装する必要があった。PostScript Level 3（1997年）はType 6（Coonsパッチ）とType 7（テンソル積）メッシュシェーディングを追加し、1990年代後半の雑誌業界で印刷されるすべてのグラデーションを支えた。Adobe Illustratorのメッシュグラデーションツールはバージョン8（1998年）で続いた。

ウェブのCSSグラデーションは人々が思うより遅く登場した。WebKitの-webkit-gradient()は2008年にSafari 4とChrome 1で独自の冗長な構文と共に出荷した。Mozillaの-moz-linear-gradient()は最終的に標準になる構文を使ってFirefox 3.6（2010年1月）で続いた。接頭辞なしのlinear-gradient()とradial-gradient()は2012年4月にW3C勧告候補に達し、2013年頃から広く使用可能になった。conic-gradient()はずっと新しく、Chrome 69の2018年9月（フラグ付き）、Chrome 75（2019年6月）でフラグが外れ、Firefox 83（2020年11月）で対応した。現在はすべての現代的なブラウザでBaselineとして利用可能だ。

スキューモーフィック、フラット、そして再びグラデーション

グラデーションは1990年代後半から2000年代初頭のウェブデザインの視覚言語になった。Apple Aquaインターフェース（2000年）のガラス質でベベル加工された反射的なWeb 2.0ボタンは、基本的にソフトなボディフェードの上にシャープな内側のハイライトを持つネストされたグラデーションだった。フラットデザイン運動はMicrosoftのMetro（Windows Phone 7、2010年）とAppleのiOS 7（2013年）を中心に結晶化し、すべてのシャドウ・ベベル・ブレンドをUIから取り除くことでグラデーション過多のスキューモーフィズムに反発した。おおよそ5年間（2013-2018年）、グラデーションは流行遅れだった。

振り子は2017年以降激しく揺り戻した。StripeのホームページのアニメーションされたマルチカラーメッシュグラデーションはSaaS業界全体がコピーするテンプレートを設定した。Instagramの2016年のロゴリブランドは、1980年代の写真ロゴの意図的なエコーである彩度の高いピンク-オレンジ-パープルのグラデーションでフラットなカメラを置き換えた。10年末までにグラデーションは再び普及したが、新しい語彙を持った：メッシュ・ぼかしたブロブ・OKLCHスムーズ・アクセシビリティ対応。Tailwind CSS 4（2025年1月）は色相補間ヒント付きのコニックグラデーションを含むキュレートされたデフォルトのグラデーションユーティリティセットを出荷した。

1画面に収めたCSSグラデーション構文

3つのCSSグラデーション関数はすべてカラーストップのリストと方向を取る：

ハードストップ（同じパーセンテージに2つのカラーストップを置く）はスムーズなブレンドではなくシャープな帯を作る：linear-gradient(red 0%, red 50%, blue 50%, blue 100%)は2色の分割で、グラデーションではない。ストライプ・セクション色付きのカード・疑似ボーダーに便利だ。

OKLCHの革命と濁ったグレーの中間点

デフォルトのsRGB補間での純粋な赤#ff0000から純粋な緑#00ff00へのグラデーションは、#7f7f00あたりで彩度の落ちた濁った黄土色を通過する。これはsRGBの線形補間が中間点でR・Gチャンネルの両方を減少させるためで、私たちの目は中間点をどちらの端点よりもはるかに暗く彩度が低いと知覚する。ウェブデザインの典型的な痛点だ。

CSS Color Module Level 4は知覚的に均一な色空間とその中でグラデーションを補間する機能を追加した：linear-gradient(in oklch, red, green)。OKLCH（およびその兄弟OKLab）は、2020年12月にBjörn Ottossonによって設計され、明度・彩度・色相を分離することで、色相軸に沿った補間がカラーホイールの短い方を通るようにし、全体を通じて彩度を保持する。OKLCHでの同じ赤から緑へのグラデーションは、中間点で鮮やかな黄色を通過する。

一般的なルール：

ブラウザサポート：グラデーションのinterpolation-methodはSafari 16.2（2022年12月）、Chrome 111（2023年3月）、Firefox 113（2023年5月）で出荷され、現在Baseline Widely Availableだ。

解像度プリセット：適切なピクセル数を選ぶ

スクリーンより小さい壁紙は引き伸ばされてぼやけて見える；はるかに大きいものはファイルサイズとメモリを無駄にする。2026年の一般的なターゲット：

解像度一般名称用途
1920×1080Full HD / 1080p2026年で最も一般的なノートPCとデスクトップ
2560×1440QHD / 2K主流のゲーミングとクリエイターモニター
3440×1440UWQHD ウルトラワイド湾曲した21:9ウルトラワイドモニター
3840×21604K / UHDハイエンドデスクトップとApple Studio Display
5120×28805KApple iMac Retina, Studio Display
1080×1920スマートフォン縦向き一般的なFHD Androidベースライン
1170×2532 / 1290×2796最新のiPhoneiPhone 13-16シリーズ、19.5:9
2048×2732iPad Pro 12.9"4:3タブレット

いつ使うか

アクセシビリティ：グラデーション上のテキスト

グラデーション背景の最も一般的な実際の間違いは、重ねられたテキストのコントラスト不足だ。WCAG 2.2 SC 1.4.3（コントラスト最小、レベルAA）は本文テキストに4.5:1、大きいテキスト（18pt通常または14ptボールド）に3:1を要求している。WCAGはソリッドな背景向けに書かれている；グラデーションでは、テキストの下のすべての点でのコントラスト比が重要で、最悪の点が基準になる。

グラデーションの上にテキストを置く場合の実際的な修正：テキストの下に半透明の黒または白のスクリムを追加する・テキストの下のグラデーションを狭い明度範囲に制限する・またはフォールバックとして強いtext-shadowを使う。垂直グラデーション（上が暗く、下が明るい）は斜めよりも一般的にテキストフレンドリーだ。左から右に流れるテキストは各行で一定のバックグラウンドの明度に遭遇する；長いテキストブロックの下の45°グラデーションはすべての行が明度範囲を横断することになり、一貫したコントラストがはるかに難しくなる。

もっと知りたい方へ

グラデーションに目立つバンドが見えるのはなぜですか？

2つの通常の原因がある。第一に、JPEG圧縮：JPEGのDCTベースのエンコーディングは、特に低彩度領域でスムーズな色調の傾斜に目立つ「ブロッキング」を生む。代わりにPNGまたはWebPロスレスで保存すること。第二に、8ビット/チャンネルの色深度：近い2色の間の8ビットグラデーションには少数の独自の色調ステップしかなく、目でそれらを認識できることがある。わずかなノイズ/ディザオーバーレイ（1-2%のノイズ）を追加すると、自然なバリエーションを加えることでバンドを分解できる；多くのハイエンドデザインツールはこれを自動的に行う。

デスクトップ壁紙には線形・放射状・コニックのどれを使えばよいですか？

ほとんどの壁紙には、わずかに斜め（約135°）の線形か画面外に中心を置いた放射状が最も良く見える。非対称性を作りつつ気が散らない。コニックグラデーションは印象的だが、8時間見続ける壁紙よりもアクセントサーフェス（アルバムアート・ソーシャル投稿）に向いている。「デザイナーが作った」感が出るためだ。メッシュグラデーション（複数の重なり合う放射状グラデーション）は最もモダンな見た目だが、JSライブラリまたは生成された画像が必要だ。低い彩度で2つの補色を持つ単一の放射状グラデーションが良い近似になる。

どの色の組み合わせが最も良く見えますか？

3つの信頼できるパターン：アナロガス（ホイール上で隣接する2色、紫から青・オレンジから赤）は落ち着いて調和的に読める；モノクロマティック（同じ色相、明度が変わる、古典的なStripeブルー）はブランド感があり繊細に読める；トライアディック+OKLCH（知覚的な色空間で補間された3〜4色の等間隔な色）は現代的なStripe / Instagramのルックを与える。oklch()補間を明示的に使わない限り、2つの純粋な補色（赤/緑、青/オレンジ）は避けること。sRGBは濁った中間点を生む。

何かサーバーに送信されますか？

いいえ。グラデーションはブラウザの<canvas>にレンダリングされ、PNGはcanvas.toDataURL()でエクスポートされ、CSS文字列はJavaScriptによってローカルで生成される。色の選択・寸法・生成された画像に関する何もページの外に出ない。

関連ツール

CSSグラデーション

線形、放射状、円錐CSSグラデーションを視覚的に構築します。

カラーホイール

補色と調和色を見つけます。

カラーコンバーター

HEX、RGB、HSL、CMYKの間で変換します。