CSSグラデーション・グラデーション文字
linear・radial・conicのグラデーションを色と位置をプレビューしながら作ります。背景用と、文字をグラデーションにするCSSを両方出力します。
グラデーションの種類
プレビュー グラデーション文字
グラデーション
色や角度を動かすと、その場でCSSを作ります。
CSS
補足
- 色は位置の順に並べ替えて出力します。CSS は前の色より小さい位置を前の位置まで引き上げて描くため、並びが前後すると見た目が変わるからです。
-
radial-gradientのellipseと中心50% 50%、conic-gradientのfrom 0degは既定値なので書きません。 -
グラデーション文字は
background-clip: textで背景を文字の形に切り抜き、文字色を透明にして作ります。Safari 向けに-webkit-付きも一緒に出します。文字を選択したときやコピーしたときは通常の文字として扱われます。 - 入力した値は、この端末の外へ出ません。
よくある質問
どの種類のグラデーションを作れますか？
linear-gradient（線形）・radial-gradient（円形）・conic-gradient（扇形）の3種類と、それぞれの repeating- 版を作れます。色は 2〜10 個まで置け、色ごとに位置（0〜100%）と不透明度を指定できます。
文字をグラデーションにするにはどうすればよいですか？
「グラデーション文字用」の CSS をそのまま文字の要素に貼ってください。background-clip: text で背景を文字の形に切り抜き、文字色を透明にして作ります。Safari 向けの -webkit-background-clip と -webkit-text-fill-color も一緒に出力します。
色の境目をくっきりさせる（ストライプにする）ことはできますか？
できます。同じ位置に 2 つの色を置くと、そこで色がぼけずに切り替わります。「繰り返す」をオンにして 0〜10% のような短い範囲に色を置くと、しま模様になります。プリセットの「しましま」がその例です。
色の位置を px で指定できますか？
できません。位置は % だけです。px で指定したい場合は、出力した CSS の % を書き換えてください。