このサイトにはボタンの発光、アイコンのにじみ、カードのグラスモーフィズムなど「光っている」表現がいくつも出てきます。バラバラに数値を書いていくと統一感が崩れるので、光の色と強さを --glow / --glow-2 という2つのCSS変数に集約しています。
色そのものではなく「にじみの色」を変数化する
--accent は文字やボーダーに使う純粋な色ですが、--glow はそれとは別に、半透明でぼかし用に調整した色として定義しています。
[data-mode="night"] {
--accent: #ffd479;
--glow: rgba(255, 212, 121, 0.35);
}
[data-mode="dusk"] {
--accent: #ffce6b;
--glow: rgba(255, 180, 110, 0.4);
}
[data-mode="day"] {
--accent: #e8943a;
--glow: rgba(232, 148, 58, 0.22);
}同じ色相でも、透明度をモードごとに変えているのがポイントです。夜は星空が暗いので 0.35〜0.4 としっかり光らせても浮きませんが、昼は背景が明るいため 0.22 まで下げないと、光が「滲み」ではなく「灰色いシミ」に見えてしまいます。色だけでなく透明度もモードごとにチューニングして初めて、3つのムードで同じ「光ってる感」を保てました。
box-shadowとdrop-shadowを使い分ける
発光表現には主に2つのCSSプロパティを使っていますが、役割を明確に分けています。
/* 矩形要素（ボタン、カード）の発光には box-shadow */
.cta-btn:hover {
box-shadow: 0 16px 34px -12px var(--glow), 0 0 30px var(--glow);
}
/* 透過画像・ドット絵（アイコン、装飾）の発光には drop-shadow */
.decor {
filter: drop-shadow(0 0 10px var(--glow));
}box-shadow は要素の矩形（ボックス）に沿って光るので、カードやボタンのような塗りつぶされた領域に向いています。一方 drop-shadow は要素の実際の形（アルファチャンネル）に沿って光るので、ドット絵アイコンのような不定形の透過画像に使わないと、四角い影がついてしまい違和感が出ます。この使い分けを誤ると「アイコンなのに背景ごと四角く光る」という事故が起きるので、コンポーネントを増やすたびに素材の種類（矩形かアルファ画像か）で機械的に選ぶルールにしています。
2つ目の色 --glow-2 は「主役を食わない脇役」
--accent-2（水色寄りの色）に対応する --glow-2 も用意していますが、使用箇所は意図的に絞っています。主要なCTAやホバーには必ず --glow を使い、--glow-2 はセクションの背景装飾やアクセントの縁取りなど、視線の主役にならない場所だけに割り当てています。2色の光を対等に使うと画面のどこを見ればいいか分からなくなるため、「常に強いのはアクセント1色だけ」という優先順位をトークンの命名と使用箇所のルールで固定しています。
backdrop-filter は「光」ではなく「質感」の変数として別枠
ガラスのようなぼかし表現（backdrop-filter: blur(8px) saturate(1.2) など）は光の色を持たないため、--glow 系とは別の関心事として扱っています。数値（ぼかし量・彩度）は用途別に3段階（8px / 14px / 16px）だけに絞り、ナビは軽め、モーダル的な要素は強め、というように「情報量が多い場所ほど強くぼかす」基準で固定しています。
変数を増やすこと自体は簡単ですが、「何を変数にして、何を固定値のまま残すか」の線引きの方が、後から見返したときの一貫性を左右すると感じます。