CSSグラデーション生成器 — 美しい背景を簡単に

CSSグラデーションはかつて画像が必要だった強力な背景技法です。生成器でグラデーションを視覚的に構築し、すぐに使えるCSSコードを生成します。

線形・放射状・円錐形グラデーション

linear-gradient()は直線方向に展開。radial-gradient()は中心から放射状に広がります。conic-gradient()は点の周りを回転——円グラフ効果に最適です。

カラーストップと位置

カラーストップは色の開始・終了位置を決定します。複数のストップで多色グラデーションが可能。同じ位置に2つのストップを置くとハードエッジ効果が得られます。

グラデーションの組み合わせ

カンマで区切った複数のグラデーションを重ねると複雑なパターンが作れます。repeating-linear-gradient()はパターンを繰り返します。background-positionのアニメーションでスムーズな色の変化が実現します。