Tool

CSS Gradient Generator

色・位置・角度を調整しながら、線形・放射状グラデーションを作成します。見え方を確認して CSS をコピーできます。

1種類と方向を選ぶ
2色と位置を調整

バーをクリックして色を追加。下の丸いハンドルや各色のスライダーを動かして位置を調整できます。

位置は 0〜100% の範囲で指定し、位置の順にグラデーションを生成します。同じ位置に2色を置くと、くっきりとした境界になります。

3グラデーションを確認

プレビューの形は CSS に含めません。実際に配置する要素のサイズに合わせて使えます。

4CSS をコピー