UTILS.
100% ブラウザ内で完結

CSS グラデーションジェネレーター

線形または放射状のグラデーションをライブプレビューで作成し、CSS をコピーできます。

このツールについて

色・位置・角度を選んで 2 色の線形または放射状グラデーションを作成し、background ルールをコピーできます。ライブプレビューはすべてブラウザー内で動作します。

よくある質問

線形グラデーションの角度とは何ですか?
角度は色の移り変わる方向を設定します。0° は上、90° は右、180° は下、というように指定します。
線形ではなく放射状を使うのはどんなときですか?
中心点から色を外側へ放射させたいとき(スポットライトのような効果)に放射状を使います。線形は色を直線に沿ってブレンドします。

その他のツール