CSS グラデーション ジェネレーター
このタブの中で動きます。アップロードなし。
CSS
使い方
CSS の背景グラデーションをデザインしてコードをコピー。アップロードなし。
種類かプリセットを選ぶ
プリセットか「ランダム」から始め、線形・円形・扇形を選んで角度や形を設定します。
色を設定
それぞれの色を変え、位置をドラッグします。色は最大 6 つまで追加でき、× で削除します。
CSS をコピー
「CSS をコピー」を押してスタイルシートに貼り付けるか、サイズを選んで「PNG を保存」で壁紙にします。
よくある質問
CSS グラデーションの作り方は？
種類（線形・円形・扇形）を選び、色とその位置を設定し、角度や形を調整します。CSS はその都度更新されるので、「CSS をコピー」を押します。
カラーストップとは？
グラデーション上の 0% から 100% のある位置に置く色です。最大 6 つまで追加でき、位置の順に色が混ざります。
background の行が 2 つあるのはなぜ？
1 行目はとても古いブラウザ用の単色、2 行目がグラデーションです。現在のブラウザはすべてグラデーションを使います。
グラデーションを画像として保存できる？
はい。サイズ（デスクトップ、スマホ、1440p、正方形）を選んで「PNG を保存」を押します。画像はブラウザ内で描画されます。
線形・円形・扇形の違いは？
線形は角度をつけた直線に沿って色が変わります（90° は左から右）。円形は中心から円または楕円で広がります。扇形はカラーホイールのように中心の周りを回ります。