CSS グラデーション生成
linear-gradient, radial-gradientをビジュアルで生成。
▶このツールについて
CSSのlinear-gradientやradial-gradientは、ボタン、背景、ヒーローセクションなどでよく使われる装飾です。しかし、角度や色の停止位置を数値で調整するのは試行錯誤が多く、イメージ通りの見た目にするには時間がかかります。このツールでは、色・角度・位置をビジュアルで調整しながらグラデーションをプレビューし、完成したCSSをそのままコピーして使用できます。linear-gradientとradial-gradientの両方に対応。Webデザインの効率を大幅に向上させます。
使い方
色・角度・位置を調整してグラデーションをプレビュー。生成されたCSSをコピーしてそのまま使用できます。
いつ使うか
ボタンや背景のグラデーション、ヒーローセクションの装飾、アイコンやバッジのスタイルに。
使用例
linear-gradient(135deg, #667eea 0%, #764ba2 100%)、radial-gradient(circle, #fff 0%, #000 100%)