このツールについて
線形・放射状・円錐の各グラデーションを選び、カラーストップを追加して色と位置を調整すると、プレビューが即座に更新されます。線形では角度、放射状と円錐では中心位置を指定でき、いずれも repeating 版に切り替えてストライプ状の表現も作れます。出力はベンダープレフィックスを含まない標準の background-image 宣言です。
CSS / FRONTEND · ブラウザ内で処理
CSS グラデーション生成
linear・radial・conic グラデーションをプレビューしながら作成しコピー。
カラーストップは最大 8 個。出力は単一の background-image 宣言で、そのまま貼り付けられます。
background-image: linear-gradient(135deg, #6d5efc 0%, #00c2ff 100%);
プリセット
プリセット
グラデーションの種類
グラデーションの種類
カラーストップ
操作手順
- グラデーションの種類を選ぶか、プリセット配色を適用します。
- 角度や中心位置を調整し、カラーストップの位置をドラッグします。
- 生成された background-image 宣言をコピーします。
プライバシー
計算もプレビューもすべてこのブラウザ内で行われます。入力が送信・保存されることも、URL やログに記録されることもありません。
よくある質問
- conic-gradient の対応状況は。
- 円錐グラデーションは現行の Chrome、Edge、Firefox、Safari で対応済みで、CSS だけで円グラフや色相環を描く際に使われます。非常に古いブラウザに対応する必要がある場合は、線形または放射状で代替してください。
- なぜ -webkit- プレフィックスが付かないのですか。
- グラデーション構文は標準化されており、現行ブラウザにプレフィックスは不要です。旧来のプレフィックス構文は角度の基準が異なるため、付けるとかえって表示がずれる恐れがあります。本ツールは常に標準構文を出力します。