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

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

CSS グラデーション生成ツールは、構文を手書きせずに素早くグラデーションを作りたいウェブデザイナーやフロントエンド開発者向けの無料オンラインツールです。線形・放射・円錐のグラデーションを選び、線形と円錐では角度（度）を設定し、各停止点に HEX 色と位置（%）を指定します。編集中はプレビューが結果を表示し、対応する CSS background ルールが即座に更新されるので、そのままスタイルシートにコピーできます。ボタン、ヒーロー背景、カード、オーバーレイのデザインに使えるほか、linear-gradient()、radial-gradient()、conic-gradient() 関数の仕組みを学ぶのにも役立ちます。

CSS グラデーション生成ツールの使い方

1. グラデーションの種類を選びます：線形・放射・円錐。
2. 線形または円錐のグラデーションでは角度（0〜360 度）を設定します。放射は中央の円を使い角度は無視されます。
3. 各停止点を編集します：HEX 色を入力または選択し、位置を％（0〜100）で設定します。
4. 「停止点を追加」で色を増やすか、ごみ箱アイコンで停止点を削除します（最低 2 つは残ります）。
5. プレビューの更新を確認し、コピーボタンで生成された CSS background ルールをコピーします。

使用例

線形、90deg、#4f86f7 を 0%、#9333ea を 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

放射、停止点 #ffffff 0%、#4f86f7 50%、#1e3a8a 100%

background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);

よくある質問

対応しているグラデーションの種類は？

3 種類です：linear-gradient（角度を度で指定）、radial-gradient（中央の円）、conic-gradient（開始角度を指定）。種類トグルで切り替えると CSS が即座に更新されます。

色の停止点と位置はどう機能しますか？

各停止点には色と 0〜100 の位置（%）があります。停止点はリストに表示された順序でそのまま CSS に書き出され、ブラウザの解釈と一致するため、順序を直接コントロールできます。「停止点を追加」で増やし、最低 2 つまで削除できます。

HEX を入力せずに色を視覚的に選べますか？

はい。各停止点の横にある小さな色チップをクリックするとブラウザ標準のカラーピッカーが開きます。または #4f86f7 のような HEX 値を色フィールドに直接入力できます。変更に合わせてプレビューと CSS が更新されます。

放射グラデーションで角度フィールドが消えるのはなぜ？

ここでの放射グラデーションは中央の円として描画され角度を使わないため、方向を変える線形と円錐の種類でのみ角度フィールドが表示されます。

色や CSS はどこかにアップロードされますか？

いいえ。グラデーションはローカルの文字列・色演算を使ってブラウザ内で完結します。色や CSS、設定がサーバーに送信されることは一切ないため、オフラインでも動作し、作業内容のプライバシーが保たれます。