🌈 CSSグラデーション生成
background: linear-gradient(90deg, #1a3a5c 0%, #4facfe 100%);
複数のカラーストップと角度を調整しながら、線形グラデーション(linear-gradient)・放射状グラデーション(radial-gradient)のCSSコードをリアルタイムプレビュー付きで生成できるツールです。ボタンや背景のデザイン作成に便利です。
使い方
- グラデーションの種類(線形・放射状)を選びます。
- 線形の場合は角度をスライダーで調整します。
- カラーストップの色と位置を調整し、生成されたCSSコードを「コピー」でコピーします。
計算の仕組み
このツールは、CSSのグラデーション（linear-gradient・radial-gradient）の値を、色と位置を選びながら作れるツールです。 線形グラデーション: linear-gradient(角度, 色1 位置1, 色2 位置2, …) 角度は、0degが下から上、90degが左から右、180degが上から下の方向です。 円形グラデーション: radial-gradient(circle, 色1 位置1, 色2 位置2, …) 中心から外側に向かって色が変わります。 色の区切り（カラーストップ）は2〜6個まで設定でき、位置（%）の小さい順に並べ替えてから出力します。色と色の間はなめらかに変化します。同じ位置に2つの色を置くと、境目のはっきりした縞模様になります。
計算例
初期設定の出力 background: linear-gradient(90deg, #1a3a5c 0%, #4facfe 100%); 左の濃い紺色から、右の明るい水色へ変化します。 縞模様の例 linear-gradient(90deg, #1a3a5c 0%, #1a3a5c 50%, #4facfe 50%, #4facfe 100%) 左半分が紺色、右半分が水色になります。
使用上の注意
- グラデーションは背景画像として扱われるため、background-colorではなくbackgroundかbackground-imageに指定します。
- 文字の上にグラデーションを使う場合は、どの位置でも文字との十分なコントラストがあるか確認してください。
- すべての主要ブラウザで、ベンダープレフィックス（-webkit-など）なしで使えます。
よくある質問
カラーストップはいくつまで追加できますか?
最大6つまでのカラーストップを追加できます。
放射状グラデーションで角度は指定できますか?
いいえ。放射状グラデーションは中心から円形に広がるため、角度の概念がありません。線形グラデーションでのみ角度を調整できます。
生成したCSSはそのまま使えますか?
はい。「background: linear-gradient(...);」の形式で出力されるので、CSSファイルにそのまま貼り付けて使用できます。