CSSグラデーションはすべてのブラウザで対応していますか？

linear-gradientとradial-gradientはすべてのモダンブラウザで対応しています。conic-gradientもChrome、Firefox、Safari、Edgeの最新版で利用可能です。IE11は非対応です。

グラデーションを背景画像の代わりに使うメリットは？

CSSのみで表現できるため画像ファイル不要で読み込みが速く、レスポンシブ対応も容易です。解像度に依存しないため、Retina対応も不要です。

デザイン・CSS無料登録不要

CSSの線形（linear）・放射状（radial）グラデーションをGUIで作成。角度・色停止点を自由に設定。コードをワンクリックコピー。無料ツール。

Angle: 135°

Color Stops

#3b82f6at%

#8b5cf6at%

CSS Output

background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

プリセット

FAQ

linear-gradient（直線的）、radial-gradient（放射状）、conic-gradient（円錐形）の3種類があります。それぞれ方向、中心点、色の停止位置を指定してカスタマイズできます。

バリエーション

読み込み中...