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

美しいCSSグラデーションをビジュアルに作成。無料、登録不要、コピー用コード付き。

グラデーションの種類

角度 90deg

カラーストップ

グラデーションの種類を選び、最大6つのカラーストップを位置付きで追加し、角度スライダーを動かします。プレビューはリアルタイムに更新され、スタイルシートに貼れる正確なbackground宣言が出力されます。

線形は方向に沿って、放射は中心から外向きに、円錐は円周上に色を回転させます。円グラフやカラーホイールに最適です。

すべてはブラウザ内で実行されます。デバイスから出ることはありません。

あくまで目安です。表示の公表価格に基づいて計算しており、実際の請求額とは異なる場合があります。利用規約

グラデーションは全ブラウザで動きますか？

線形と放射は最新のブラウザで広く対応しています。円錐は現行ブラウザで対応していますが、非常に古いものでは動きません。

3色以上使えますか？

はい。最大6つのカラーストップを追加し、それぞれの位置を調整できます。

サーバーに送信されますか？

いいえ。エディタはすべてブラウザ内で動作します。