CSS グラデーション生成

使い方

1. グラデーションタイプ (linear / radial) を選択します
2. linear の場合は方向 (角度) を、radial の場合は形状を設定します
3. カラーストップの色と位置を調整してグラデーションを作ります
4. プレビューで確認し、CSS コードをコピーして使えます

グラデーションタイプ

Linear (線形): 指定した角度の方向に色が変化します。0deg で下から上、90deg で左から右に向かいます。

Radial (放射状): 中心から外側に向かって色が変化します。円形 (circle) と楕円形 (ellipse) を選べます。

よくある質問

Q. 生成した CSS はそのまま background プロパティに使えますか?

A. はい。コピーした値はそのまま background: ... や background-image: ... に貼り付けて使えます。要素には別途 height や min-height の指定が必要な点だけご注意ください。

Q. 角度の 0deg はどの方向を指しますか?

A. linear-gradient では 0deg が「下から上」、90deg が「左から右」、180deg が「上から下」を意味します。時計回りに角度が増える方向が CSS 仕様の定義です。

Q. カラーストップを3つ以上にできますか?

A. はい。「ストップを追加」ボタンで何色でも追加できます。複数色を組み合わせれば、虹色やネオン調など複雑なグラデーションも表現できます。

Q. 古いブラウザでも表示されますか?

A. 主要モダンブラウザ (Chrome, Firefox, Safari, Edge) では問題なく表示されます。IE11 以前など極めて古い環境ではベンダープレフィックス付きの構文や画像フォールバックが必要になる場合があります。

Q. 透明から色へのグラデーション (フェードアウト) はどう書けばよいですか?

A. カラーピッカーは透明色に対応していませんが、コピー後のコードで色名を transparent や rgba(255,255,255,0) に手動で書き換えると、フェードアウト表現になります。