CSSグラデーション生成ツール｜linear/radial対応・コード即コピー可能な無料エディタ

linear-gradientとradial-gradientをビジュアルで作成してCSSコードを即座にコピーできる無料ツール。色ストップの追加・削除、角度調整、ランダム生成に対応。ブラウザ内で完結し、データはサーバーに送信されません。

ブラウザ内処理完全無料登録不要

カラーストップ

詳細設定

角度: 301deg

-webkit- プレフィックスを含める

プレビュー

生成された CSS

background: linear-gradient(301deg, #4ECDC4 0%, #FF6B6B 100%);

このツールについて

使い方・特徴・補足情報

CSSグラデーション生成ツールとは

CSSグラデーション生成ツールは、線形（linear）と円形（radial） を画面上で組み立てるツールです。完成した CSS をそのままコピーします。

カラーピッカーで色を選び、スライダーで角度を変えるだけで仕上がります。コードはワンクリックで取り出せます。

ランダム生成ボタンを押せば、配色の参考になるサンプルがすぐ並びます。

入力した色情報はすべてブラウザ内で処理し、外部サーバーへ送りません。

👤 こんな人におすすめ✨

フロントエンド開発・Webデザインをする人

✅ 楽になること

CSSグラデーションを素早く組み立てる

✍️ 避けたい手間

角度や色ストップの手書きミス

解決できる困りごと

グラデーションの値を手書きで試行錯誤する時間を減らせる
色ストップの位置や角度をプレビューで確認でき、想定外の見え方を防ぎやすい
生成したCSSをそのままコピーでき、転記時のスペルミスを避けやすい

使い方

ページを開くとランダムなグラデーションが表示されます。そのまま使うか、色を変えて調整します。
上部の 「Linear」「Radial」 タブでグラデーションの種類を切り替えます。
カラーストップのカラーピッカーをクリックして色を変え、スライダーで位置を調整します。
「+ 色を追加」 ボタンでカラーストップを追加（最大8色）、「削除」ボタンで削除（最低2色）できます。
「詳細設定」でLinearの角度・Radialの中心位置・ベンダープレフィックスを設定します。
生成されたCSSコードをコピーボタンでクリップボードにコピーし、CSSファイルに貼り付けます。

使用例

斜め2色のリニアグラデーション

ヒーローセクションでよく使う、左上から右下へ流れる青→ピンクのグラデーションを生成する例です。

入力

種類: Linear / 角度: 135deg
ストップ1: #3b82f6 (0%)
ストップ2: #ec4899 (100%)

出力

background: linear-gradient(135deg, #3b82f6 0%, #ec4899 100%);

中心から放射状のラジアル

ボタンの中央が明るく外側が暗くなる立体感のあるラジアルグラデーション例です。中心位置とサイズを調整できます。

入力

種類: Radial / 形状: circle / 中心: 50% 50%
ストップ1: #fbbf24 (0%)
ストップ2: #ea580c (100%)

出力

background: radial-gradient(circle at 50% 50%, #fbbf24 0%, #ea580c 100%);

活用シーン

ボタンやバナーの背景デザイン

青から水色、オレンジから赤など、印象的なグラデーションを素早く作れます。CTAボタンやキャンペーンバナーの背景色に向いています。

カードやヒーローセクションの装飾

linearで斜め、radialで放射状を試し、LPや記事ページの雰囲気に合う配色を探せます。試行錯誤がスムーズになります。

グラデーション文字の下準備

background-clip: text と組み合わせ、文字にグラデーションをかけるベースコードに使えます。見出しの強調に向きます。

CSSグラデーションの学習

コードを書かずに視覚で確認しながら、linear-gradientの角度指定やカラーストップの仕組みを体感できます。初学者の試行錯誤に向いています。

デザインカンプとの色合わせ

Figmaで作ったグラデーションをCSSで再現する際、カラーピッカーで色を拾って実機の見え方を確認できます。実装段階の手戻りを減らせます。

プレゼン資料の背景試作

スライドの表紙やセクション扉に使うグラデーションを試作できます。生成したコードはCSS以外の配色参考にもなります。

技術的な解説

補足: 仕組み

linear-gradient は直線上に色を並べます。角度とカラーストップを linear-gradient(90deg, ...) の形に文字列で組み立てます。

radial-gradient は中心から同心円状に広げます。ストップは2〜8個、位置は0〜100%です。

組み立てとプレビュー描画はすべてブラウザ内の処理で完結します。詳細設定では -webkit- 付きの行も出力します。

もっと詳しく

角度の 0deg は「下→上」という仕様の落とし穴

linear-gradient の角度は「グラデーションが進む向き」を指します。CSS では 0deg が**上方向（終点が上）**を意味します。

transform: rotate() の感覚で指定すると上下が逆になりがちです。プレビューを見ながらスライダーで角度を決め、目的の向きになった時点の値をコピーするのが確実です。

カラーストップの位置が重なるとハード境界になる

隣り合うストップの位置（%）を同じ値にすると、その地点で色がパキッと切り替わるハードストップになります。

#3b82f6 50%, #ec4899 50% は中央で2色がくっきり分かれ、ストライプや2分割背景をCSSだけで作れます。なめらかにしたいのに境界が出るときは、隣接ストップの位置がぶつかっていないか確認してください。

ベンダープレフィックスが今も必要な場面

現行の主要ブラウザはプレフィックスなしで linear-gradient に対応しています。しかし古いiOSや社内システムの旧ブラウザ向けには -webkit- 付きが求められる場合があります。

詳細設定でベンダープレフィックスをオンにすると、標準仕様と -webkit- の両行が出力されます。必要な場合だけオンにし、通常はオフで十分です。