v150 · CSS · Color · demo

Token Transparency

Four design tokens — --brand, --success, --danger, --neutral — generate their own transparent variants on demand using alpha(from var(--token) / percentage). No extra variables, no color pre-computation.

Checking alpha() support...

change the base tokens

--brand: #3b82f6
var(--brand) — 100%
alpha(from var(--brand) / 60%)
alpha(from var(--brand) / 30%)
alpha(from var(--brand) / 10%)
--success: #0a8f5c
var(--success)
alpha(from var(--success) / 60%)
alpha(from var(--success) / 30%)
alpha(from var(--success) / 10%)
--danger: #d11a2a
var(--danger)
alpha(from var(--danger) / 60%)
alpha(from var(--danger) / 30%)
alpha(from var(--danger) / 10%)
--neutral: #666666
var(--neutral)
alpha(from var(--neutral) / 60%)
alpha(from var(--neutral) / 30%)
alpha(from var(--neutral) / 10%)

In practice — alert banners from one token each

Info: background is alpha(from var(--brand) / 10%), border is var(--brand).
Success: background is alpha(from var(--success) / 10%).
Warning: background is alpha(from var(--danger) / 10%).
/* One token, many transparencies — Chrome 150 */
:root { --brand: #3b82f6; }

.btn-ghost {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.btn-subtle {
  background: color-mix(in srgb, var(--brand) 30%, transparent);
}
.alert-bg {
  background: color-mix(in srgb, var(--brand) 15%, transparent);
}
.overlay {
  background: color-mix(in srgb, var(--brand) 60%, transparent);
}

@supports (background-color: alpha(from red / 50%)) {
  .btn-ghost    { background: alpha(from var(--brand) / 10%); }
  .btn-subtle   { background: alpha(from var(--brand) / 30%); }
  .alert-bg     { background: alpha(from var(--brand) / 15%); }
  .overlay      { background: alpha(from var(--brand) / 60%); }
}

/* vs. old approach — separate variables for every shade: */
/* --brand-10: rgba(0, 34, 255, 0.1);  */
/* --brand-30: rgba(0, 34, 255, 0.3);  */
/* --brand-60: rgba(0, 34, 255, 0.6);  */

see also

scenario focus

Select a scenario to focus its rendered example and summary.

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗