CSSグラデーションジェネレーター
無料オンライン CSS グラデーション生成ツール、リアルタイムプレビュー
CSSグラデーションとは
CSSグラデーションは、2つ以上の色の間の滑らかな移行を表示します。linear-gradient(直線的)、radial-gradient(放射状)、conic-gradient(扇形)の3種類があります。背景、ボタン、テキスト効果に使用されます。
CSSグラデーションジェネレーターの使い方
グラデーションタイプを選択し、カラーストップを追加・調整します。角度や方向を設定します。プレビューがリアルタイムで更新されます。生成されたCSSコードをコピーしてプロジェクトで使用できます。
▶linear-gradientとradial-gradientの違いは?
linear-gradientは指定した方向に沿って色が変化します。radial-gradientは中心点から外側に向かって色が変化します。ボタンにはlinear、スポットライト効果にはradialが適しています。
▶カラーストップとは何ですか?
カラーストップはグラデーション内の特定の位置での色を定義します。例:linear-gradient(red 0%, blue 100%)。複数のカラーストップを追加して複雑なグラデーションを作成できます。
▶グラデーションはテキストに適用できますか?
はい、background-clip: textとcolor: transparentを組み合わせることで、テキストにグラデーション効果を適用できます。