グラデーション壁紙ジェネレーター
強いぼかしを効かせた3色のグラデーションは、この4年間に公開されたほぼすべてのSaaSランディングページや大半のデスクトップ壁紙で使われている背景スタイルです。このツールは3つのHEXカラーを調整可能な角度とガウスぼかしで混ぜ合わせ、デスクトップ、スマートフォン、またはZoom背景の解像度で書き出します。
グラデーション壁紙の作り方
-
1
3色を選ぶ
HEX値を直接調整するか、「ランダム」をクリックして意外性のあるパレットを試しましょう。
-
2
角度を設定する
0〜360°。135°は「夕焼け」の斜めのブレンド、90°は「朝焼け」の横方向のブレンドです。
-
3
ぼかしを調整する
ぼかしを強くするほど色の境界が隠れ、キャンバス全体がなめらかになります。
-
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への変換ツール
バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを取得できます。7ビットと8ビットのエンコードに対応。
BinaryからHexへのコンバーター
バイナリ入力を大文字の16進数値に変換します。0と1以外は無視され、先頭の0は保持されません。
ASCII 2進数変換ツール
任意のASCII文字列を2進数表現に変換します。各文字は8ビットになり、スペース区切りで出力されるため、プロトコルトレースや宿題にそのまま貼り付けられます。
Base64 → Hex 変換ツール
Base64文字列を、その背後にあるバイトの16進表現へ変換します。トークン、鍵、証明書、JWTの確認に便利です。
BBCodeからHTMLへのコンバーター
BBCode（掲示板マークアップ）をきれいなHTMLへ変換します。装飾タグ、リスト、引用、コード、画像、リンク、表に対応。
ランダム英字ジェネレーター
A-Zの英字をランダムに生成します。文字数を指定し、大文字・小文字・混在を選んで、ゲーム、課題、授業活動に使えます。