線形または放射状の CSS グラデーションを作成
線形か放射状かを選び、方向や形と色の区切りを指定すると、貼り付けてすぐ使えるCSSグラデーションができます。135degで0%、45%、100%の3色なら、linear-gradient()の値になります。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
区切り記号を手作業で組み立てたり、各ストップの位置を迷ったりせず、再利用可能な CSS グラデーションを作成できます。線形または放射状を選び、方向または形状を指定して、順序付けたカラーストップを 2 個以上追加してください。各ストップには CSS カラーと任意の位置を設定できます。結果は background-image 宣言、デザイントークン、スタイルシート、アプリケーションコードですぐ使える、決定的な単一の値です。不正な種類、記述子、位置、不完全なストップ一覧は、明確な入力エラーとして拒否されます。
グラデーションの種類と形状を選びます
最初に、必要な視覚効果を決めてください。線形グラデーションは軸に沿って変化するため、記述子には 135deg のような CSS 角度、または to right、to bottom、to top left のようなキーワード方向を指定します。放射状グラデーションは一点から外側へ広がります。
記述子には circle または ellipse を指定でき、closest-side や farthest-corner などのサイズを任意で追加し、at の後に中心位置も設定できます。たとえば circle at center や ellipse farthest-corner at 25% 40% と記述します。
ジェネレーターは断片を無条件に連結せず、選択された種類に合わせて記述子を検証します。そのため、線形グラデーションに放射状の形を渡すような誤りを、スタイルシートへ届く前に検出できます。カンマや宣言を壊す文字を形状へ紛れ込ませることも防ぎます。
明確な方向へ遷移させる場合は linear、焦点から広げる場合は radial を選んでください。
カラーストップを順番に設定します
CSS に表示させたい順番どおりにカラーストップを追加してください。各ストップには色が必須であり、1 色だけでは遷移にならないため、グラデーション全体には 2 個以上必要です。色には、色名、16 進数値、rgb()、hsl()、空白区切りの新しい関数表記など、一般的な CSS 形式を使用できます。
ストップ位置は任意です。省略した場合、ブラウザーが CSS グラデーションの規則に従って、未指定のストップを配置します。指定する場合は、0%、12px、30% 45% のように、1 個または 2 個の CSS 長さかパーセント値を使用してください。
2 個の位置を指定すると、両境界で同じ色を使ったはっきりした帯を作れます。ジェネレーターは入力順を保持し、位置を並べ替えたり配色を解釈し直したりしません。重なったストップや降順のストップも、意図的な鋭い切り替えに役立つためです。
括弧の対応を確認し、宣言に危険な文字も拒否します。これにより、表現上の判断を維持しながら、予測可能な結果が得られます。
生成値を CSS と自動処理で利用します
他の背景レイヤーを維持する必要がなければ、background の短縮プロパティにも設定できます。--hero-gradient のようなカスタムプロパティへ保存し、複数のコンポーネントでトークンとして再利用する方法もあります。この機能は決定的な検証と文字列の組み立てだけを行うため、同じ入力からは常に同じ空白と同じ出力が得られます。
この安定性は、コード生成、スナップショットテスト、テーマ構築、生成値をバイト単位で比較するコンテンツシステムに適しています。ネットワーク通信、無作為な選択、モデル推論、時計の値は結果に影響しません。本ツールが生成するのはグラデーション画像の値であり、完全な CSS 規則ではありません。
セレクター、プロパティ、代替値、サイズ、必要な単色背景は、お客様のアプリケーション側で決めてください。
活用例
デザイントークンを作成します
構造化された配色と形状の設定を、テーマやコンポーネントライブラリ向けの安定したグラデーション値へ変換します。
視覚的なスタイル編集に組み込みます
種類、方向、形状、色、位置の操作項目から、ライブプレビューですぐ使える CSS を作成します。
ビルド時にスタイル値を生成します
独自の連結・検証処理を保守せず、設定ファイルから一貫したグラデーション文字列を生成します。
よくある質問
ストップ位置は省略できますか?
はい。 未指定のストップは、ブラウザーが CSS グラデーションの規則に従って自動配置します。
線形ではどの方向を使えますか?
deg、grad、rad、turn の角度、または to right、to bottom、to top left などの方向を使用できます。
放射状グラデーションの中心を動かせますか?
はい。 circle at center や ellipse at 20% 40% のように、at を使った位置を記述子へ追加してください。
なめらかな変化ではなく、くっきりした色の帯にするには?
1つの区切りに30% 45%のように2つの位置を指定します。その範囲が同じ色で塗られ、境目のはっきりした帯になります。位置が重なる場合や逆順の場合も鋭い切り替わりになり、入力した順番はそのまま保たれます。
作ったグラデーションはどこで使いますか?
background-imageに指定するか、ほかの背景を残す必要がなければbackgroundの一括指定に使います。再利用できるデザインの値として保存したり、スタイルシートに直接書いたりもできます。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/web/css-gradient-generate \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"gradient_type":"linear","direction_or_shape":"to right","color_stops":[{"color":"#2563eb","position":"0%"},{"color":"#7c3aed","position":"100%"}]}'const res = await fetch("https://api.kit.forhosting.com/web/css-gradient-generate", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"gradient_type": "linear",
"direction_or_shape": "to right",
"color_stops": [
{
"color": "#2563eb",
"position": "0%"
},
{
"color": "#7c3aed",
"position": "100%"
}
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/css-gradient-generate",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"gradient_type": "linear",
"direction_or_shape": "to right",
"color_stops": [
{
"color": "#2563eb",
"position": "0%"
},
{
"color": "#7c3aed",
"position": "100%"
}
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/css-gradient-generate", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"gradient_type":"linear","direction_or_shape":"to right","color_stops":[{"color":"#2563eb","position":"0%"},{"color":"#7c3aed","position":"100%"}]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"gradient_type":"linear","direction_or_shape":"to right","color_stops":[{"color":"#2563eb","position":"0%"},{"color":"#7c3aed","position":"100%"}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/css-gradient-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"gradient_type": "linear",
"direction_or_shape": "to right",
"color_stops": [
{
"color": "#2563eb",
"position": "0%"
},
{
"color": "#7c3aed",
"position": "100%"
}
]
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.css_gradient_generate",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
timeout_sec | 30 |
max_crawl_pages | 25 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
グラデーションの種類と形状を選びます
形状と色を分けることで、リクエストを確認しやすく、再利用もしやすくなります。
生成値を CSS と自動処理で利用します
レスポンスの gradient フィールドには、linear-gradient() または radial-gradient() で始まる値が入ります。この値を background-image に設定してください。対話的なデザイン作業にはブラウザー実行が便利で、自動化された API リクエストは 1 回 $0.002 です。
技術的な質問
カラーストップはいくつ必要ですか?
2 個以上必要です。2 個未満のリクエストは invalid_input エラーになります。
料金はいくらですか?
API は 1 リクエスト $0.002 です。このページのブラウザー実行は無料です。