タスクの道筋 / 入力から結果へ
CSS グラデーションを組み立てる方法
- 01
グラデーションタイプを選ぶ
「グラデーションタイプ」を開き、直線のブレンドなら「リニア」、円形なら「ラジアル」を選びます。プレビューのバッジが、作業中の現在の角度を表示します。
- 02
方向またはフォーカスを設定する
「方向 / フォーカス」は 0〜360 の範囲です。リニアグラデーションでは角度（度）を、ラジアルでは中心の周りのリング上にフォーカスポイントを配置します。バッジは値をライブで追跡するため、小さな修正も判断しやすいです。
- 03
色とストップを決める
「開始色」と「終了色」を設定し、「開始ストップ」（0〜99%）と「終了ストップ」（1〜100%）を配置します。開始は終了より前にある必要があり、逆だとステータスが「値を確認」に変わります。
- 04
ブレンド帯をコントロールする
2 つのストップ間の距離が遷移ゾーンです。1% しか離れていないストップは 2 色ストライプ用のほぼ硬いエッジを生み、0% と 100%（デフォルト）のストップは最も柔らかい全幅のブレンドを与えます。数字ではなくプレビューを見て判断しましょう。
- 05
宣言をコピーする
「CSS をコピー」または「.css をダウンロード」で toolars-gradient.css を保存します。.gradient ルールは background 宣言 1 本——linear-gradient(…deg, …) または radial-gradient(circle at …, …)——で、ストップに正確に対応します。
- 06
適用して拡張する
この単一の宣言は、独自の background-size や background-repeat の追加ときれいに組み合わせられます。3 色目が必要なら、ルールをコピーして中間ストップを手で挿入してください。調整した 2 つのストップがブレンドの両端を固定します。1 行なので、デザインシステムがトークンをそのように管理しているなら、カスタムプロパティにもきれいに貼れます。