CSS グラデーション生成
色
プリセット
CSS グラデーションの作り方
- 種類を選びます。線形は設定した角度でまっすぐ、円形は中心から円状に広がり、扇形は設定した角度から中心の周りを回ります。
- 各色を変え、スライダーで 0%〜100% の位置を決めます。「色を追加」でいちばん広いすき間に新しい色が入り、最大6色まで。✕ で削除します。
- プリセットを押してそこから始めることもできます。プレビューはすぐに変わり、「CSS をコピー」でスタイルシートに貼る行をコピーできます。
よくある質問
background の行が2つあるのはなぜ？
1行目はグラデーションを描けないまれなブラウザ向けの単色で、それ以外のブラウザでは2行目が上書きします。
角度の意味は？
線形では 0deg が下から上、90deg が左から右、180deg が上から下です。扇形では最初の色が始まる位置で、上から時計回りに数えます。
文字や枠線にも使える？
はい。文字なら背景に設定し、background-clip: text と color: transparent を加えます。枠線なら border-image に border-image-slice: 1 と一緒に使います。