🌈 CSS グラデーション ジェネレーター
linear / radial / conic グラデーションをビジュアル編集。カラーストップを自由に追加・削除し、CSS コードをコピーできます。
🔒 プライバシーについて
- ・すべての処理はブラウザ内で完結します
- ・入力データは一切サーバーに送信されません
- ・保存ログ・履歴・データベース等は存在しません
- ・登録・ログイン・課金は一切不要です
カラーストップ
プリセット
📖 つまずきやすいポイント
linear / radial / conic の各グラデーションをビジュアルに編集し、そのまま貼れる CSS を書き出します。ここで出力するのは既定の sRGB 補間のコードで、ブラウザは 2 色の間を「赤・緑・青の各成分を等間隔で割る」やり方でつなぎます。これは人間の目にとって自然なつなぎ方ではありません — 中間色がくすむのも、縞が出るのも、ほとんどがこの 1 点に由来します。
| ケース | 何が起きるか | どうする |
|---|---|---|
| 中間に灰色っぽい帯が出る | 青 → 黄のように色相環で向かい合う 2 色をつなぐと、中間で彩度が落ちて濁ります。sRGB の直線補間は rgb(0 0 255) と rgb(255 255 0) の中点を rgb(128 128 128) — つまりちょうど灰色と計算するからです。デザインツールの見た目と CSS の結果が食い違う原因もここで、Figma や Illustrator は別の色空間で補間していることがあります。 |
いちばん確実なのは中間にカラーストップを 1 つ足すことです。青 → 黄なら中央に緑や水色を置くと、色相環をなぞる自然な変化になります。対応ブラウザに限れば linear-gradient(in oklch 90deg, blue, yellow) のように補間色空間を指定するのが本筋で、oklab / oklch は明度が知覚に沿うのでくすみません。ただし Safari 16.2 未満や古い Android WebView では宣言ごと無効になり、背景が完全に消えます — sRGB 版を先に書いて上書きする形にしてください。 |
| 大きな面で使うと縞 (バンディング) が見える | 1 チャンネルは 0〜255 の 256 段階しかありません。画面の幅いっぱい 1,920px に 明度差の小さいグラデーションを敷くと、1 段あたり 7〜8px の帯になり、境目が線として見えます。暗い色ほど目立ちます — 人間の目は暗部の差に敏感なのに、sRGB の符号化は暗部に割く段数が少ないためです。ヒーロー画像の背景やモーダルのオーバーレイでよく問題になります。 | ごく薄いノイズを重ねるのが定番の解決法です — background-image: url(noise.png), linear-gradient(...) のように 100〜200px 角の透過 PNG (不透明度 2〜4%) を上に敷くと、階段の境目が視覚的に散って見えなくなります。SVG の feTurbulence をデータ URI で埋め込めば画像ファイルを増やさずに済みます。あるいはグラデーションの距離を短くする — 全面ではなく高さ 300px 程度に抑えるだけで大半は解消します。色数を増やしても解決しません (段数が足りないことが原因なので)。 |
| 要素のサイズを変えると見た目が変わってしまう | radial-gradient の既定値は ellipse farthest-corner です。つまり要素の縦横比に合わせて楕円に歪み、要素のいちばん遠い角で色が終わるように毎回スケールされます。カード上ではきれいな円だったものが、横長のヒーロー領域では平たい楕円になり、モバイルでは縦長になります。conic-gradient も同様に、正方形でないと円グラフが楕円になります。カラーストップを % で置いた場合も、基準の長さが要素サイズなので同じ問題が起きます。 |
円を保ちたいならradial-gradient(circle at center, …) と明示してください。終端も closest-side / farthest-side / closest-corner の 4 種から選べます — 要素幅に依存させたくないときは circle 200px at center のように絶対値で書くのが最も予測しやすいです。conic-gradient で円グラフを作るなら aspect-ratio: 1 を併記します。確認は必ずブラウザの幅を実際に動かして行ってください — 固定幅のプレビューだけでは、この種の崩れは絶対に見つかりません。 |
グラデーションは background-image であって background-color ではありません。background: linear-gradient(...) と一括指定で書くと、それまでの background-color が transparent にリセットされます — 画像の読み込みに失敗したときのフォールバック色まで消えるので、background-color を別行で先に書いておくのが安全です。もう 1 つ、透明への補間で transparent と書いてはいけません。transparent は sRGB では rgba(0,0,0,0) つまり透明な黒なので、白 → transparent は途中でグレーを通ります。rgb(255 255 255 / 0) のように同じ色の不透明度だけを 0 にしてください。最後に、ブラウザの印刷では背景画像が既定でオフです。グラデーションの上に白文字を置いた見出しは、印刷すると白い紙に白文字になって消えます。
📖 使い方
-
1
種類を選ぶlinear / radial / conic から選択。種類により角度・形状の入力欄が切り替わります。
-
2
カラーストップを編集カラーピッカーで色を選び、位置スライダーで配置。追加・削除ボタンで個数を変更可能。
-
3
CSS をコピー生成された CSS をコピーボタンでクリップボードへ。background プロパティに貼り付けてください。
❓ よくある質問
入力データはサーバーに送信されますか？
ブラウザのサポート状況は？
カラーストップは何個まで追加できますか？
🔗 関連ツール
🐛 このツールで問題が発生しましたか？
完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。
ご報告ありがとうございます！
運営者に届きました。改善の参考にさせていただきます。