CSSグラデーション生成無料・登録不要
マウス操作で美しいCSSグラデーションを作成。方向や色の組み合わせを視覚的に調整してコードをコピーできます。
プレビュー
CSSコード （開発者向け）
background: linear-gradient(to right, #3B82F6, #8B5CF6);
良いCSSグラデーション生成の判断基準
ヒーローセクションの背景やボタンの装飾に使うグラデーションを、プレビューを見ながら作って CSS をコピーできるツールです。コードを本番に入れる前に、下の基準で「グラデーションの上に載るもの」まで含めて確認すると、きれいだが読めない背景になるのを防げます。
上に載せるテキストが全域で読めるか
グラデーションは場所によって明るさが変わるため、テキストを重ねる場合は最も明るい部分と最も暗い部分の両方で読めるかを確認します。単色背景のときよりコントラストの確認箇所が増える点が要注意です。
色の組み合わせが濁っていないか
色相が大きく離れた2色を直接つなぐと、中間に濁った色が現れることがあります。プレビューで中間部分の色を見て、意図しないくすみが出ていないかを確認します。気になる場合は中間に経由色を足すか、色相の近い組み合わせに変えます。
方向（角度）に意図があるか
グラデーションの方向は視線の流れや要素の形と関係します。「なんとなく斜め」ではなく、要素の縦横比や、明るい側にテキスト・暗い側に余白といった配置の意図と合わせて決めると仕上がりが安定します。
ダークモードでの見え方を確認したか
サイトがダークモードに対応している場合、ライトモード前提で作ったグラデーションが浮いて見えたり、周囲との明暗が逆転したりすることがあります。両モードで表示して確認します。
印刷やスクリーンショットでの利用も想定されるか
ページが印刷される可能性がある場合、ブラウザの設定によっては背景が印刷されず、グラデーション上の白文字だけが残って読めなくなることがあります。印刷が想定されるページでは、背景なしでも内容が成立するかを確認します。
コピーした CSS を実際のブラウザで確認したか
ツールのプレビューと本番の要素ではサイズや周囲の色が違います。本番に入れる前に、実際のページに適用した状態をブラウザで確認します。対象環境での表示確認も推奨します。
ありがちな失敗例（NG → 改善）
NGプレビューの見た目だけで決めて、白文字を載せたら明るい側の端で文字が読めなくなる。
改善テキストを重ねる位置を決めてから、その範囲のグラデーションが十分暗い（または明るい）かを確認する。必要なら半透明の overlay を挟む。
→ グラデーションは場所によって明るさが変わります。テキストの可読性は最も条件の悪い箇所で判断する必要があります。
NGライトモードで作ったグラデーションをそのまま使い、ダークモードで背景だけ明るく浮く。
改善ダークモード対応サイトでは、両モードで表示を確認し、必要ならモード別にグラデーションを用意する。
→ グラデーションの印象は周囲の明暗との対比で決まります。片方のモードだけで確認すると、もう片方で違和感が出ます。
NG派手な多色グラデーションを本文エリアの背景まで広げて、長時間読むページ全体に適用する。
改善強いグラデーションはヒーローや CTA などの限られた範囲に使い、本文エリアは落ち着いた背景にする。
→ 明るさや色相の変化が大きい背景は目の負担になります。装飾の強さは滞在時間の長い場所ほど抑えるのが基本です。
CSSグラデーション生成の使い方
- 1開始色と終了色を選択します
- 2グラデーションの方向やタイプを調整します
- 3生成されたCSSコードをコピーして利用します
CSSグラデーション生成の例文・サンプル
CSSグラデーション生成の例
開始色: #667EEA / 終了色: #764BA2 / 方向: 135度
background: linear-gradient(135deg, #667eea, #764ba2);
※ CSSコードをコピーしてそのままスタイルシートに貼り付け可能
よくある質問
CSSグラデーション生成は無料ですか？
はい、完全無料でご利用いただけます。会員登録も不要です。
スマートフォンでも使えますか？
はい、スマートフォン・タブレット・PCなど、ブラウザがあればどのデバイスでもご利用いただけます。
対応している画像形式は？
PNG、JPG、WebP、GIF、SVG形式に対応しています。
📘 関連ガイド記事
関連ツール
CSSグラデーション生成について
手書きのグラデーション構文をGUIに置き換える
WebサイトやLP、SNS画像でグラデーション背景を使う場面は多くありますが、CSS の linear-gradient 構文を手書きするのは慣れが必要で、色合いを少し変えるたびにコードを書き直すのは効率的ではありません。本ツールは色1・色2の2色と、色を進める方向をGUIで選ぶだけで、その場でCSSコードが1行生成され、コピーボタンでそのまま貼り付けられる形で出力されます。方向は右へ・左へ・下へ・上へ・斜め（45度）・斜め（135度）の6通りから選べます。プレビューも同時に表示するため、見た目を確認しながら調整できます。処理はブラウザ内で完結し、選んだ色をサーバーへ送信しません。会員登録もログインも不要です。
3通りの色指定で実際に生成したCSS
どんなCSSが返るのか、色の指定を3通り変えて実際に生成しました。以下はいずれもツールが返した実際の出力で、手を加えていません。
【1. 既定の2色を左から右へ】 既定の青（#3B82F6）と紫（#8B5CF6）を、方向を左から右にした場合、返ってきたのは次の1行だけです。 background: linear-gradient(to right, #3B82F6, #8B5CF6);
【2. 同じ色を2つ指定】 開始色と終了色に同じ濃紺（#003069）を指定した場合の出力も、次の1行だけでした。 background: linear-gradient(to right, #003069, #003069); 2色が同じなので見た目はグラデーションにならず単色になりますが、それでもエラーや警告は出ず、そのままCSSが生成されました。
【3. 明るい黄色と白】 上から下へ、黄色（#ffff00）から白（#ffffff）へのグラデーションを指定すると、次の1行が返りました。 background: linear-gradient(to bottom, #ffff00, #ffffff);
3回とも、返ってきたのは指定した色1・色2・方向を差し込んだ linear-gradient の1行だけで、複数のCSSが同時に返ることはありませんでした。表示されるコードは常にこの1行なので、そのままコピーして使えます。
同じ色を入れてもエラーにならないクセ
上の実際の出力から分かったクセがあります。開始色と終了色に同じ色を入れても、エラーにならないことです。#003069 を2つ指定すると linear-gradient(to right, #003069, #003069) がそのまま生成されましたが、これはグラデーションではなく単色の背景になります。色が変化しない指定でもツールは止めてくれないため、意図した2色になっているかは自分で確認する必要があります。
もう1つ、扱える範囲を押さえておくと安全です。返ってくるのは指定した2色と方向を反映した linear-gradient の1行だけで、放射状（radial-gradient）や3色以上のグラデーション、色の途中位置（カラーストップ）の指定はできません。凝った配色が必要なときは、この点が制約になります。
これらは今回試した3件で確認できた挙動で、すべての色の組み合わせで同じとは限りません。実際に使う色で一度生成し、プレビューが意図どおりか見てから使ってください。
テキストを重ねるときコントラストは自分で確かめる
グラデーションの上に文字を載せる用途では注意点があります。明るい黄色（#ffff00）と白（#ffffff）という、境目が薄くて文字が読みにくくなりやすい組み合わせを入れても、コントラスト不足を知らせる警告は出ませんでした。本ツールにはそもそもコントラストや色の組み合わせを判定する仕組みがなく、どんな色を入れても、指定どおりのCSSを1行返すだけです。読みやすさの良し悪しは判定していません。
そのため、グラデーション背景の上にテキストを置くデザインでは、最も明るい部分と最も暗い部分の両方で文字が読めるかを自分の目で確認してください。長時間読ませるページの背景に、明暗差の激しいグラデーションや、目に負担のかかる派手なグラデーションを敷くのは向きません。読みやすさを優先する場面では、単色や淡いグラデーションのほうが無難です。
生成したCSSを本番で使う前の確認
生成したCSSをそのまま本番サイトに貼る前に、次の点を確認すると失敗が減ります。
1つ目は、対象ブラウザでの表示確認です。古いブラウザでは新しいグラデーション構文が動かない場合があります。本番環境では Can I Use などで対象ブラウザの対応状況を確かめてください。
2つ目は、色と方向が意図どおりかのプレビュー確認です。前述のとおり同じ色でもエラーにならないため、生成結果のプレビューを見て、狙ったグラデーションになっているかを目視します。
本ツールが向いているのは、LP やサイトのヒーローセクション背景、ボタンや CTA の装飾、SNS バナー・OGP 画像のベースなど、CSS ベースで手早くグラデーション素材を用意したい場面です。CSS Gradient Generator や uiGradients など海外の同種ツールもありますが、英語UIで日本語ユーザーには敷居が高い側面があります。本ツールは日本語UIで、リアルタイムプレビューを見ながら直感的に作成でき、会員登録もログインも不要です。ただし、ノイズやテクスチャを重ねた本格的な背景素材が必要な場合は、画像編集ソフトのほうが向いています。