🌈 CSSグラデーション生成
カラーストップ
%
%
CSS
background: linear-gradient(90deg, #1a3a5c 0%, #4facfe 100%);
複数のカラーストップと角度を調整しながら、線形グラデーション(linear-gradient)・放射状グラデーション(radial-gradient)のCSSコードをリアルタイムプレビュー付きで生成できるツールです。ボタンや背景のデザイン作成に便利です。
使い方
- グラデーションの種類(線形・放射状)を選びます。
- 線形の場合は角度をスライダーで調整します。
- カラーストップの色と位置を調整し、生成されたCSSコードを「コピー」でコピーします。
よくある質問
カラーストップはいくつまで追加できますか?
最大6つまでのカラーストップを追加できます。
放射状グラデーションで角度は指定できますか?
いいえ。放射状グラデーションは中心から円形に広がるため、角度の概念がありません。線形グラデーションでのみ角度を調整できます。
生成したCSSはそのまま使えますか?
はい。「background: linear-gradient(...);」の形式で出力されるので、CSSファイルにそのまま貼り付けて使用できます。