CSS グラデーション作成ツール

スライダーを動かすと、上のパネルがその場で変わります。気に入ったら 1 行をコピーしてスタイルシートに貼るだけです。

角度: 90°

角度は線形と扇形に効きます。円形は中心から広がります。

カラーストップ

CSS

使い方

グラデーションは透明な色で終わることが多く、真っ白なパネルの上では不透明な色とまったく同じに見えます。市松模様は色が薄いところから透けて出るので、設定した通りのものが目に映ります。画像編集ソフトがこの習慣を持つのも、まさにこのためです。

CSS はカラーストップを並べ替えてくれません。30% のストップより前に 70% を書くと、ブラウザーは後ろの値を押さえつけ、グラデーションは黙って 1 色を失います。このツールは行を組み立てるときに位置順へ並べ替えるので、スライダーを隣より先へ動かしても結果は壊れません。

3 つの種類は何が違いますか。

線形は直線に沿って進み、角度を取ります。90deg は左から右、180deg は上から下です。円形は中心から同心円状に広がるので、発光やスポットライトに向きます。扇形は時計の針のように点のまわりを回り、円グラフやカラーホイールはこれで作られています。

透明を含むグラデーションはどう作りますか。

ブラウザーのピッカーが透明度に対応していれば下げるだけです。対応していなければコピーした行を手で直します。rgba(31, 95, 214, 0) は不透明な色と同じようにストップとして使えます。白へのフェードより透明へのフェードのほうが便利で、どんな背景の上でも成立します。

文字の色に使えますか。

はい。2 行足すだけです。グラデーションを background-image に置き、background-clip: text と color: transparent を添えます。文字は形を保ったまま、グラデーションが字の中から透けて見えます。

同じ角度なのに円形だと見え方が違うのはなぜですか。

円形では角度がまったく効きません。円形グラデーションは中心から始まり方向を持たないため、角度は線形と扇形のためのもので、そこでは始まる位置を決めます。