フロントエンドの背景色づくり
ストップと角度を動かしながら色味を確かめ、決まったら background のCSSをそのままコピーして貼ります。
読み込み中…
Guide
CSSグラデーションジェネレーターは、線形・放射・円錐の各グラデーションを画面上で組み立てながら、そのまま貼り付けられるCSSを同時に生成します。カラーストップはドラッグで位置を動かし、空白部分をクリックして追加し、色は自由に変更できます（最低2つは必要）。線形は0–359°の方向、放射はcircle/ellipseと9か所の中心位置、円錐は開始角度と中心位置を指定できます。Web Cryptoの乱数モジュールを使った「ランダムインスピレーション」も備え、類似色・補色・トライアドの配色を提案します。
更新日 2026-09-102 min read
-webkit- 互換表記も含まれ、1行目は単色のフォールバックになります。| 入力 | 出力 | 説明 |
|---|---|---|
| 135°、ストップ2色 | linear-gradient(...) |
CSSを同時生成 |
| 円錐グラデーション、中心は右下 | PNG壁紙 | Canvasが選択したプリセット寸法で描画 |
ストップと角度を動かしながら色味を確かめ、決まったら background のCSSをそのままコピーして貼ります。
同じグラデーションを、デスクトップ向け4Kやスマホの縦長サイズでPNGに書き出します。
いいえ。基準の色相と類似・補色・トライアドの配色をランダムに選び、彩度・明度・線形の角度もさらにランダムに決めています。
1行目は単色のフォールバックです。線形・放射では旧式のWebKit表記が続き、いちばん最後の行が現代の標準グラデーションです。
配色・CSS・PNGはすべてブラウザ内で計算・生成されます。外部の配色サービスや画像サービスへのリクエストは発生しません。
更新日 2026-09-10
線形・放射状・円錐グラデーションを視覚的に編集。CSS コードをコピーしたり、PNG 壁紙として書き出し可能
このツールの翻訳は未完了です。一部は原文または代替言語で表示されます。
カラーストップをドラッグして位置を調整し、空白部分をクリックすると追加できます
background: #6366f1; /* 古いブラウザー向けの代替色 */ background: -webkit-linear-gradient(315deg, #6366f1 0%, #ec4899 100%); background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);