本文へスキップ

全画面グラデーション

画面全体をグラデーションにします。2色か3色を選び、角度を変えたり放射状にしたりできます。ワンクリックで全画面になり、画面サイズに合わせて壁紙としてダウンロードすることもできます。

ダブルクリック/ダブルタップまたはFキーで全画面135° · #FF7E5F → #FEB47B

ショートカットキー

F
全画面
Esc
全画面を終了
← →
45度回転
↑ ↓
プリセットを切り替え
H
コントロールバーの表示/非表示
S
PNGをダウンロード

色も画像もお使いのブラウザ内で作成され、何もアップロードされません。

色
135°
CSSコード
background: linear-gradient(135deg, #FF7E5F 0%, #FEB47B 100%);


グラデーションの使い道

  • スマホやパソコンの壁紙: 色を決めたらPNGをダウンロードできます。サイズはこの画面、1920 × 1080、4K、スマホ縦向きから選べます。
  • ムード照明: 部屋の照明を消して、タブレットやテレビに夕焼けやオーロラのようなやわらかいグラデーションを表示すると、単色より奥行きが出ます。
  • 撮影や配信の背景: 画面を商品や人物の後ろに置けば、カメラには色の変化がある背景が映ります。
  • 階調の段差(バンディング)の確認: 「黒から白」を選び、グラデーションがなめらかに変化しているか見てください。帯状の縞が見える場合は、画面、グラフィックボード、色の設定が原因の可能性があります。

きれいなグラデーションを作るコツ

同じ系統で明るさが近い2色がいちばんやわらかくなじみます。たとえば淡いピンクとピンクです。色が離れすぎていると中間がくすんだグレーっぽくなりやすいので、中間色を追加すると自然につながります。

角度90度は左から右、180度は上から下です。放射状のグラデーションは中心から外に向かって広がり、スポットライト風の背景に向いています。

使い方

  1. プリセットを選ぶか自分で色を選び、グラデーションの種類と角度を調整します。必要ならタイマーを設定します。
  2. 「全画面表示」を押すか、Fキーを押すか、画面をダブルクリック(スマホはダブルタップ)します。
  3. 終了するにはEscを押します。スマホでは画面をタップしてコントロールバーを出し、「終了」を押します。

iPhoneのSafariはWebページの全画面表示に対応していないため、ウィンドウいっぱいに表示されます。アドレスバーまで完全に消したい場合は、先に「ホーム画面に追加」してから開いてください。