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

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

CSS グラデーション生成ツールは、構文を手書きせず視覚的にグラデーションを作りたいウェブデザイナーやフロントエンド開発者向けの無料のブラウザ内ツールです。線形・放射・円錐（任意で反復バリアント付き）を選び、ドラッグできるプレビューバー上、または HEX 色と位置のフィールドを持つ停止点ごとの行で色停止点を編集します。放射グラデーションは円/楕円の形状、サイズキーワード（closest-side、closest-corner、farthest-side、farthest-corner）、at X% Y% の中心を持ち、円錐は開始角度と中心を取ります。複数のグラデーションレイヤーをカンマ区切りで 1 つの背景に重ね、ランダム生成し、厳選パレットプリセットを適用し、各停止点の色相を回転させ、貼り付けるだけの background 規則をコピーできます。

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

1. グラデーションの種類（線形・放射・円錐）を選び、反復パターンにするにはオプションで「反復」を切り替えます。
2. プレビューバー上で停止点をドラッグして位置を変え、バーの空いた所をクリックして停止点を追加し、停止点をダブルクリックして削除します。
3. 各停止点を HEX 色と位置のフィールドで微調整するか、（対応時は）スポイトで画面から色を吸い取ります。
4. 放射グラデーションでは形状（円か楕円）、サイズキーワード、中心 X/Y を設定し、円錐では開始角度と中心を設定します。
5. レイヤーを増やしてグラデーションを 1 つの背景に重ね、「ランダム」を試し、パレットプリセットを適用し、または全色相を一度に回転します。
6. 生成された CSS background 規則をコピーしてスタイルシートに貼り付けます。

使用例

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

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

放射、ellipse farthest-corner at 30% 30%、#ffffff 0%、#4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

レイヤー1 線形 90deg; レイヤー2 放射 circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

よくある質問

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

線形・放射・円錐グラデーションで、それぞれ任意の反復バリアントがあります。放射は円/楕円の形状、サイズキーワード（closest-side、closest-corner、farthest-side、farthest-corner）、at X% Y% の中心を追加し、円錐は開始角度と中心を追加します。複数レイヤーを 1 つの背景に重ねることもできます。

ドラッグできる停止点バーはどう動きますか？

バー上で停止点をドラッグすると位置が変わり、バーの空いた部分をクリックすると補間色の新しい停止点が挿入され、停止点をダブルクリックすると削除されます（最低 2 つは残ります）。各停止点はバーの下に HEX 色と位置のフィールドも持ちます。

画面から色を吸い取れますか？

はい、EyeDropper API に対応したブラウザで可能です。利用できる場合、各停止点の横にスポイトボタンが表示され、クリックして画面上の任意のピクセルを選べます。もちろん HEX 値の入力やネイティブの色チップも使えます。

ランダム・パレット・色相回転は何をしますか？

「ランダム」はアクティブなレイヤーを新しいランダムグラデーションに置き換え、パレットプリセットはアクティブレイヤーの停止点を厳選配色に入れ替え、「色相を回転」は全レイヤーの全停止点の色相を一度に移動します。いずれもクリックしたときだけグラデーションを変えます。

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

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