CSSグラデーション生成ツール

背景のグラデーションを見ながらデザインして、そのまま使えるCSSをコピーできます。バーに沿ってカラーストップをドラッグしたり、バーをクリックしてストップを追加したり、角度や中心を変えたり、色を透明にしたりできます。コードには、古いブラウザ向けの単色のフォールバックも含まれます。

タイプ形状

繰り返し

角度°

中心X%

中心Y%

カラーストップ ストップをドラッグして移動します。バーをクリックすると追加できます。

色

不透明度%

位置%

プリセット

CSS

線形・円形・円錐グラデーションの違いは何ですか？
線形グラデーションは、指定した角度の直線に沿って色が変わります。円形グラデーションは、中心から円または楕円状に広がります。円錐グラデーションは、時計の針のように中心の周りを回転し、カラーホイールや円グラフに便利です。

CSSグラデーションはすべてのブラウザで動きますか？
はい。線形、円形、円錐のグラデーションは、Chrome、Edge、Firefox、Safariの現行バージョンで、ベンダープレフィックスなしで動作します。background指定の最初の行は単色で、非常に古いブラウザだけが使います。

ストライプ（縞模様）はどう作りますか？
各ストライプの開始位置と終了位置に同じ色のストップを2つ置くと、色がなじまず急に切り替わります。そのうえで「繰り返し」をオンにしてください。最後のプリセットが例です。