入力
ワークスペースを準備中…
使い方
- 線形または放射状を選び、2 色を設定します。
- ストップ位置と、線形の場合は角度を調整します。
- 「CSS をコピー」で背景宣言を要素に適用します。
CSS グラデーションを調整する
CSS グラデーションは画像ファイルではなく色から背景を作ります。カード、バナー、セクションに合わせて拡大縮小でき、スタイルシートから編集できます。
このツールは 2 色に対応します。線形の方向、または中央から広がる円形の放射状グラデーションを選び、ストップ位置で色の変化の開始と終了を調整します。
方向とカラーストップ
角度は線形グラデーションに適用されます。放射状は要素の中央を中心とする円で、角度設定はありません。
ストップ位置は 0%～100% です。近づけると変化が狭い範囲に収まり、同じ位置にすると明確な色の境界になります。
#2563eb → #9333ea, 135 degreesbackground: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);表示中の色と角度を使った 2 ストップの線形グラデーションです。
プレビューの意味
プレビューは生成した CSS を直接使います。特に放射状では、プレビューと対象要素の縦横比の違いが見た目に影響します。
最初のストップを 2 番目より後には設定できません。2 色 1 レイヤーを生成するため、追加のストップやレイヤーはスタイルシートで指定してください。
宣言を適用する
出力は background: で始まります。対象のセレクターに適用する際は、既存の背景画像、色、一括指定が上書きされないか確認してください。
テキスト入力は最大 1 MiB。CSS と HTML の変換は Worker 内で実行し、制限時間は 30 秒です。色のツールは sRGB を使用します。生成したスタイルはプレビューのため、実際のレイアウトでテストしてください。
よくある質問
3 色目を追加できますか？
この画面は 2 ストップに対応します。必要なら CSS をコピーし、カンマ区切りのストップを手動で追加してください。
放射状に角度設定がないのは？
中央の円形グラデーションは中心から外側に広がります。角度が関係するのは線形のみです。
色をはっきり分割できますか？
はい。両方のストップを同じ位置にすると、その間の滑らかな変化がなくなります。
画像ファイルを生成しますか？
いいえ。「CSS をコピー」は background 宣言を出力します。使用時にブラウザーが描画します。
実際の要素では違って見えるのは？
対象要素のサイズや縦横比によって描画が変わります。プレビューだけでなく、実際の要素で確認してください。