ToolsOnline

オンライン CSS グラデーション生成

linear / radial グラデーションの CSS を視覚的に生成


      

この CSS グラデーション生成について

カラーストップを調整するだけで CSS グラデーションを視覚的に生成できます。linear-gradient と radial-gradient の両方に対応し、線形は 0〜360°の任意の角度を設定可能。各ストップはカラーピッカーと位置(%)の組み合わせで、2〜5 個の範囲で自由に追加・削除でき、位置は自動で整列されます。

変更はすべてプレビューに即時反映され、標準的な CSS(例:background: linear-gradient(135deg, #6ea8fe 0%, #00e589 100%);)が同時に出力されるので、そのままコピーしてスタイルシートに貼り付けられます。計算はすべてブラウザ内で完結し、通信は発生しません。