カスタムプロパティで色相を再利用する

sticky-step では --hue を差し替えるだけで段ごとの色合いを決定しています。スライダーで色相の変化を観察できます。

現在値: 152
Pattern Demo

色相を差し替えるだけで全体が連動

CSS のカスタムプロパティをグラデーションや影にも共有することで、 DOM を増やさずにブランドカラーを切り替えられます。Sticky ステップの背景やバッジ、hover 時のシャドウまで同一トーンで揃います。

background: linear-gradient(135deg, hsla(152, 62%, 42%, 0.92), hsla(152, 58%, 36%, 0.9)); shadow: rgba(0, 0, 0, 0.16)