Softonic

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

ステップ 1 / 3
次へ

強いぼかしを効かせた3色のグラデーションは、この4年間に公開されたほぼすべてのSaaSランディングページや大半のデスクトップ壁紙で使われている背景スタイルです。このツールは3つのHEXカラーを調整可能な角度とガウスぼかしで混ぜ合わせ、デスクトップ、スマートフォン、またはZoom背景の解像度で書き出します。

グラデーション壁紙の作り方

  1. 1

    3色を選ぶ

    HEX値を直接調整するか、「ランダム」をクリックして意外性のあるパレットを試しましょう。

  2. 2

    角度を設定する

    0〜360°。135°は「夕焼け」の斜めのブレンド、90°は「朝焼け」の横方向のブレンドです。

  3. 3

    ぼかしを調整する

    ぼかしを強くするほど色の境界が隠れ、キャンバス全体がなめらかになります。

  4. 4

    画像を書き出す

    ディスプレイやスマートフォンの解像度に合わせてダウンロードしましょう。

推奨の出力サイズ

用途 解像度
4Kデスクトップ 3840 × 2160
1440pデスクトップ 2560 × 1440
1080pデスクトップ 1920 × 1080
iPhone 15/16 1179 × 2556
Android（最新機種） 1080 × 2400
Zoomのバーチャル背景 1920 × 1080

いつでも使えるパレットのヒント

  • 補色ペア＋ニュートラル：青、オレンジ、ベージュ。
  • 類似色の3色：カラーホイール上で60°以内にある3色を選びます、紫、マゼンタ、ピンク。
  • 暖色・寒色のコントラスト：暖色を1つ（ピーチ、赤）、寒色を1つ（ティール、ネイビー）、ニュートラルを1つ（クリーム）。
  • モノクロ：1つの色相を明度違いで3段階使うと、落ち着いた統一感のある壁紙になります。

ぼかしが重要な理由

ぼかしのない3色グラデーションは、色の境目にくっきりとした境界（いわゆる「レインボー効果」）が現れます。大きなキャンバスに60〜100pxのfilter: blur()をかけると、境界がなめらかに溶け合い、macOS Big SurやiOS 16の壁紙を思わせる柔らかなグラデーションになります。

リアルタイムCSSプレビュー

background: linear-gradient(135deg, #FF6B35, #7B2D26, #1E3A8A);
filter: blur(80px);

ぼかしのないくっきりしたグラデーションが好みなら、フィルターを0にして、知覚的に均一なブレンドが得られるin oklch補間への切り替えを検討してみてください。

よくある質問

暗くなりません。このジェネレーターは出力より大きなキャンバスにグラデーションを描いてぼかしをかけ、内部で最終サイズに切り抜くため、端のピクセルが透明になることはありません。どのぼかし強度でも、ダウンロードした壁紙の端はきれいなままです。

このジェネレーターは3色を使います。色数が多いとスクリーンセーバーのような印象になりがちで、落ち着いた壁紙には3色がちょうどよい塩梅です。

完全に同じではありません。スマートフォンはデスクトップより縦長の比率なので、斜めの角度の見え方が変わります。それぞれの出力サイズでプレビューし、違和感があれば角度を調整してください。

いいえ。キャンバスはお使いの端末内で描画され、ブラウザーの外に出るのはあなたが実行したダウンロードだけです。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

Markdownリンク生成ツール

URLとアンカーテキストからMarkdownリンクの記法を生成します。タイトルのツールチップや、長い文書を読みやすく整える参照形式のリンクにも対応しています。

HTML 圧縮ツール

通常のコメントを削除し、空白を整理して、ブラウザ内で HTML をコンパクトにします。使用前に結果を確認してください。

このツールは他の言語でも利用できます