CSSグラデーション ジェネレーター
グラデーションの種類・向き・色を選ぶだけで、CSSグラデーションが作れます。カラーストップはカラーピッカーとスライダーで調整し、「＋カラーストップ」で追加できます。生成されるのは短く正しいCSSで、代替の背景色（background-color）も付くため、グラデーションが表示されない環境でも文字が読めます。
計算方法
3種類のグラデーション
| 関数 | 色の変化 | 初期値（指定なしの場合） |
|---|---|---|
linear-gradient() | 指定した角度の直線に沿って | 180deg＝上から下 |
radial-gradient() | 中心から外側へ | 楕円・中央・最も遠い角まで |
conic-gradient() | 中心の周りを円グラフのように | 0deg（上）から時計回り |
線形グラデーションでは角度が向きを決めます。0degは上、90degは右、180degは下です。斜めにしたい場合は45degや135degを指定します。「繰り返す」をオンにするとrepeating-linear-gradient()などが生成され、最初と最後のストップの間の模様が繰り返されます。ストライプ模様に便利です。
カラーストップと省略した位置
位置の指定は任意です。省略した場合はW3Cの仕様（CSS Images「Coloring the Gradient Line」）に従います。最初のストップは0%、最後のストップは100%に置かれ、その間の位置なしのストップは均等に配置されます。ある位置が前の位置より小さい場合は前の位置にそろえられ、これでくっきりした境界ができます。位置を2つ続けて書くと（red 0% 50%）、その範囲が単色の帯になります。表には、ブラウザが各ストップで実際に使う位置が表示されます。
代替色が必要な理由
グラデーションは画像として扱われます。画像が描画されない場合（強制カラーモードや値の書き間違いなど）には、background-colorだけが残ります。このジェネレーターは、各色が占める範囲で重み付けした平均色を代替色にします。
例 linear-gradient(90deg, #3B82F6 0%, #9333EA 100%)：2色がそれぞれ線の半分を占めます。赤（59＋147）÷2＝103、緑（130＋51）÷2＝90.5≒91、青（246＋234）÷2＝240となり、代替色は#675BF0です。文字色とのコントラストは、この代替色とグラデーションの最も明るい部分・最も暗い部分の両方で確認してください。
よくある質問
CSSでグラデーションを指定するには？
background-image: linear-gradient(90deg, #3B82F6, #9333EA);のように書きます（ショートハンドのbackgroundでも可）。その前に代替としてbackground-colorを指定しておくと安心です。このジェネレーターは両方の行をコピーできる形で出力します。
グラデーションを斜めにするには？
「線形」を選び、向きを45°（左下から右上）や135°（左上から右下）に設定します。CSSではlinear-gradient(45deg, …)のように書きます。
なめらかな変化ではなく、くっきりした境界にするには？
2つのストップに同じ位置を指定します（例：red 50%, blue 50%）。または1色に位置を2つ指定します：red 0% 50%, blue 50% 100%。ストライプにするなら「繰り返す」をオンにします。
透過するグラデーションは作れますか？
はい。ストップをrgba()や8桁のHEX値で入力します（例：rgba(0, 0, 0, 0.5)）。transparentも使えます。プレビューでは透明部分が市松模様で表示されます。代替色は常に不透明です。
conic-gradientはすべてのブラウザで使えますか？
現行のブラウザならすべて対応しています（ChromeとEdgeは69、Firefoxは83、Safariは12.1から）。ごく古いブラウザでは代替色によって背景が空白になるのを防げます。
出典・根拠
- css-images-3, § 3.1: W3C – CSS Images Module Level 3: Linear Gradients
- css-images-3, § 3.2: W3C – CSS Images Module Level 3: Radial Gradients
- css-images-3, § 3.4.1: W3C – CSS Images Module Level 3: Gradient Color-Stops
- css-images-4, § 3.3: W3C – CSS Images Module Level 4: Conic Gradients
- MDN Web Docs – linear-gradient()
- MDN Web Docs – radial-gradient()
- MDN Web Docs – conic-gradient()
更新日：
関連ツール
- CSS box-shadowジェネレーターCSSのbox-shadowをスライダーで作成。複数の影、オフセット、ぼかし、広がり、透明度付きの色、inset、プリセットに対応し、プレビューを見ながらCSSをコピーできます。
- CSS角丸ジェネレーター（border-radius）スライダーでCSSの角丸を作成できるborder-radiusジェネレーターです。四隅まとめて・個別、pxと％、楕円の8値指定に対応。最短のコードをプレビューしてコピー。
- 配色ジェネレーター（カラーパレット作成）1つの基準色から補色・類似色・トライアド・スクエア・モノクロマティックなどの配色を自動作成。HEX・RGB・HSLの値をそのままコピーできる無料ツールです。
- カラーコード変換：HEX・RGB・HSL・HSV・CMYKカラーコードを変換します。HEXからRGB、RGBからHEX、HSL・HSV・HWB・CMYKへ一括変換。どの形式で入力しても自動で判別し、結果はコピーできます。
- Base64エンコード・デコードBase64・Base64urlのエンコードとデコードをUTF-8で正しく変換。日本語も文字化けしません。URLエンコード・デコードにも対応した無料ツールです。
- DNSレコード確認（nslookupオンライン）ドメインのDNSレコードをオンラインで確認。A、AAAA、MX、TXT、CNAME、NS、SOA、CAA、SRV、PTRをTTL・DNSSECの状態・エラーコードの解説付きで表示します。