カラーストップをドラッグで調整するだけで、思い通りのCSSグラデーションコードをその場で生成。 プリセットやランダム生成、Tailwind CSS形式での出力にも対応しています。
カラーストップ
カラー
位置
不透明度
プリセットから選ぶ
CSSコード
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
CSSグラデーションとは？linear-gradient・radial-gradientの基本
CSSのグラデーションは、画像を使わずに複数の色をなめらかに変化させた背景をCSSだけで表現できる機能です。代表的な指定方法として、直線的に色が変化するlinear-gradient（線形グラデーション）と、中心点から放射状に色が変化するradial-gradient（円形グラデーション）の2種類があります。
本ツールは、色・角度・中心位置・広がり方といった各パラメーターを画面上の操作だけで調整し、そのまま貼り付けて使えるCSSコードをその場で生成できるジェネレーターです。カラーストップはバー上でドラッグして直感的に位置調整でき、細かい数値指定にも対応しています。
ボタンの背景、ヒーローセクションの帯、カード装飾、アイコンの背景など、Webデザインのさまざまな場面で使えるグラデーションを、コーディング不要でスピーディーに作成できます。
こんなシーンで便利です
ボタンやCTAの背景に使うグラデーションを作りたい時に
目を引くボタンやコールトゥアクションの背景として、2〜3色のグラデーションを手軽に試作・調整したい場合に活用できます。
ヒーローセクションや背景の帯を装飾したい時に
ページ上部のヒーローエリアや区切りの帯など、面積の大きい背景装飾として使うグラデーションの角度・配色を確認しながら決めたい場合に便利です。
スポットライトのような光の演出を作りたい時に
円形グラデーションの中心位置と広がり方を調整することで、スポットライトが当たったような光の演出やアイコン背景を作成できます。
Tailwind CSSのプロジェクトでそのまま使えるコードが欲しい時に
Tailwind CSSを利用している場合でも、アービトラリバリュー形式でそのままclassNameに貼り付けられるコードとして出力できます。
使い方は簡単 4ステップ
- 「線形グラデーション」または「円形グラデーション」を選びます。
- カラーストップのマーカーをドラッグ、または数値入力で色・位置・不透明度を調整します。
- 線形の場合は角度、円形の場合は形状・中心位置・広がり方を設定します。
- 「CSS」または「Tailwind」の出力形式を選び、生成されたコードをコピーしてご利用のスタイルシートに貼り付けます。
※すべての調整はブラウザ内の操作だけで完結し、入力・選択した内容がサーバーに送信されることはありません。
ご利用時の注意点
- 生成されるコードはモダンブラウザでそのまま動作する標準のCSS構文です。ベンダープレフィックス（-webkit-など）は付与していません。
- 円形グラデーションの「広がり方」は farthest-corner（最も遠い角）がCSSの初期値にあたる指定です。迷った場合はそのままご利用ください。
- カラーストップは最大6色まで追加できます。位置が近すぎる、または不透明度を極端に下げるとグラデーションの境目が視認しにくくなる場合があります。
- 完全無料・安全：選択した色や角度などの情報は外部に送信されない、ブラウザ完結型のツールです。
CSSグラデーションを使いこなすためのポイント
linear-gradient・radial-gradientをデザインに取り入れる際に押さえておきたい考え方を解説します。
結論：角度と色の距離感が、グラデーションの印象を大きく左右する
同じ2色の組み合わせでも、角度（linear-gradientの場合）や色相の距離感によって受ける印象は大きく変わります。近い色相同士（例：青→水色）は落ち着いた印象に、遠い色相同士（例：紫→黄色）は華やかで目を引く印象になりやすい傾向があります。用途に応じて角度と配色の組み合わせを調整しましょう。
linear-gradientの角度の考え方
CSSのlinear-gradientでは、0degが「下から上」、90degが「左から右」、180degが「上から下」という向きになります。直感的な操作をしたい場合は、本ツールの8方向プリセットボタン（上・右上・右…）を使うと角度の数値を意識せずに方向を決められます。
radial-gradientの「広がり方」キーワードの違い
radial-gradientの広がり方には、closest-side（最も近い辺まで）、closest-corner（最も近い角まで）、farthest-side（最も遠い辺まで）、farthest-corner（最も遠い角まで、初期値）の4種類があります。要素の形やグラデーションを収める範囲によって見え方が変わるため、複数試して比較するのがおすすめです。
Tailwind CSSでグラデーションを使う際の注意点
Tailwind CSSのアービトラリバリューでCSS関数を記述する場合、スペースをアンダースコア（_）に置き換える必要があります。本ツールの「Tailwind」出力形式では、この変換を自動で行ったコードをそのまま生成するため、変換ミスの心配なく利用できます。
よくある失敗と対策
色相が近すぎる組み合わせを選び、グラデーションの変化がほとんど分からない
似た色同士を組み合わせてしまい、プレビューでは分かりやすくても、実際の要素に適用すると単色にしか見えないほど変化が乏しくなってしまう失敗です。
💡 対策・解決策を見る▼
角度を意識せずに指定し、意図した方向と逆向きのグラデーションになる
linear-gradientの角度指定を感覚だけで数値入力してしまい、想定していた向き（例：左から右）と実際の表示が食い違ってしまう失敗です。
💡 対策・解決策を見る▼
Tailwind CSSでスペースを含んだままコードを貼り付け、クラスが正しく反映されない
通常のCSSのgradient構文（スペース区切り）をそのままTailwindのアービトラリバリューに貼り付けてしまい、クラス名が正しく解釈されずスタイルが反映されない失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.linear-gradientとradial-gradientの違いは何ですか
A. linear-gradient（線形グラデーション）は指定した角度に沿って直線的に色が変化するグラデーションです。一方radial-gradient（円形グラデーション）は、指定した中心点から外側に向かって放射状に色が変化します。ボタンや背景の帯にはlinear-gradient、スポットライトのような光の表現にはradial-gradientがよく使われます。
Q.生成したCSSコードはそのままどこに貼り付ければ使えますか
A. コピーしたコードは、CSSファイル内の任意の要素の background プロパティとしてそのまま貼り付けて利用できます。例えば「background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);」のように出力されるため、対象要素のセレクタの中に記述するだけで反映されます。
Q.カラーストップの位置はどうやって調整すればよいですか
A. グラデーションバー上の丸いマーカーを指やマウスで左右にドラッグすると、そのカラーストップの位置（0〜100%）を直感的に調整できます。数値で正確に指定したい場合は、選択したストップの「位置」欄に直接パーセント数値を入力することも可能です。
Q.3色以上のグラデーションも作成できますか
A. はい。「追加」ボタンを押すことでカラーストップを最大6色まで追加できます。虹色のような複数色のグラデーションや、途中に強調色を1色だけ挟んだグラデーションなど、自由に組み合わせて作成できます。
Q.Tailwind CSSでそのまま使える形式で出力できますか
A. はい。出力形式の切り替えで「Tailwind」を選択すると、`bg-[linear-gradient(...)]`のようなアービトラリバリュー（任意の値）形式でコードが生成されます。Tailwind CSSを利用しているプロジェクトのclassNameにそのまま貼り付けて利用できます。
Q.メッシュグラデーション（複数方向に色が混ざる表現）も作れますか
A. 本ツールは線形・円形の2種類のグラデーション生成に特化しています。より複雑な複数色が有機的に混ざり合う「メッシュグラデーション」を作成したい場合は、専用のメッシュグラデーション生成ツールをご利用ください。
Q.入力した色の情報などが外部に送信されることはありませんか
A. ありません。本ツールはCSSコードの計算・生成をすべてブラウザ内だけで行う設計になっており、選択した色や角度などの情報が外部サーバーに送信されることは一切ありません。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。