CSSグラデーション生成ツール
一連の色の中止点からCSS linear-gradient、radial-gradient、またはconic-gradientの宣言を生成します。生成されたCSSをあなたのスタイルシートにコピーして貼り付けてください。
入力
リニアグラデーションの方向、円錐グラデーションの開始角度。
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-gradient-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"gradientType": "linear",
"angle": "90",
"color1": "#ff0000",
"position1": "0",
"color2": "#0000ff",
"position2": "100",
"useColor3": "",
"color3": "#ff6b6b",
"position3": "50"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-gradient-generator` tool (CSS Gradient Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-gradient-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSグラデーション生成ツール — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
その役割
CSSグラデーション生成ツールは、グラデーションのタイプ、角度、および小さな一連の色の中止点を、コピー可能なbackground CSS宣言に変換します。リニア、放射状、またはコニックを選択し、最大3色を各位置の割合で選択すると、コントロールを調整したときにSQLコードが瞬時に更新されます。
リニア対放射状対コニックグラデーション
リニアグラデーション — 色が選択した角度の直線に沿って遷移します。
0degは上を指し、90degは右を指し、180degは下を指し、円の周りを続けます。これは最も一般的なグラデーションタイプで、背景、ボタン、オーバーレイに使用されます。background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);放射状グラデーション — 色は線に沿ってではなく、中央のポイントから外側に放射され、円形または楕円形のブレンドを生成します。角度を設定する必要はありません。ブラウザの既定値（最も遠いコーナーまでサイズされた楕円、要素の中央にある）は、使用例の大部分をカバーしています。
background: radial-gradient(#464aff 0%, #00d4ff 100%);コニックグラデーション — 色は線に沿ってまたは外側に放射するのではなく、カラーホイールやパイチャートのように中央のポイントの周りを掃引します。角度は掃引が始まる場所を設定します。
background: conic-gradient(from 45deg, #ff0000 0%, #00ff00 50%, #0000ff 100%);
色の中止点と位置
各色の中止点は、グラデーションに沿った位置の割合（0-100%）と色を組み合わせます。位置0%はグラデーションが開始される場所で、100%は終了する場所です。その間の中止点は、各色が完全な強度に達する場所を制御します。このツールは、必要な2つの色の中止点と、オプションの3番目の中止点をサポートしています。これは、実際のデザインで使用されるほとんどの2色および3色のグラデーションを作成するのに十分です。中止点は位置で自動的にソートされるため、入力する順序は関係ありません。
使い方
- グラデーションのタイプを選択します：リニア、放射状、またはコニック。
- リニアおよびコニックグラデーションの場合は、角度を設定します。リニアの場合はブレンドの方向、コニックの場合は掃引の開始点です。
- 色1と色2をそれらの位置と共に選択します。これらはグラデーションの開始と終了を定義します。
- 中間色が必要な場合は、3番目の色の中止点を追加をオンにし、その色と位置を設定します。
- コード出力から生成された
background宣言をコピーして、スタイルシートに貼り付けます。
よくある質問
放射状グラデーションに形や位置のオプションがないのはなぜですか？
ブラウザの既定値（最も遠いコーナーまでサイズされた楕円、要素の中央にある）は、ほとんどの放射状グラデーションの使用方法と一致しています。楕円の代わりに円が必要な場合、またはオフセンターのグラデーションが必要な場合は、生成されたCSSにcircleキーワードまたはat <position>句を手動で追加してください。
3つ以上の色の中止点を使用できますか？
このツールは、インターフェイスを単純に保つために3つに制限されています。より多くの中止点を持つグラデーションの場合、生成されたCSSを取得し、<color> <position>%ペアのカンマ区切りリストを手動で拡張します。構文は、追加する中止点の数に関係なく同じです。
コニックグラデーションの角度は何を意味しますか？
これは、色の掃引が開始される角度（度単位）で、上部から時計回りに測定されます。0degは12時から掃引を開始し、90degは3時から開始します。
このツールは何かを保存またはアップロードしますか？ いいえ。すべての計算はブラウザ内でローカルに実行されます。色と位置の値はデバイスを離れません。