v150 · CSS · Color
Compatibility Lab
Probes the alpha() function and related relative color syntax with CSS.supports() and live DOM injection, shows a live color preview that degrades to rgba() on non-supporting browsers, and provides the exact fallback patterns for production use.
CSS.supports() probes
Live alpha() output test
Pick a base color and alpha percentage. The swatch below uses alpha() if supported, otherwise falls back to rgba() computed from the color's parsed channels.
Live preview
alpha
40%
alpha() result
alpha(from #3b82f6 / 40%)
alpha(from #3b82f6 / 40%)
Fallback patterns
/* Feature detect alpha() */
const SUPPORTS_ALPHA = CSS.supports('background-color', 'alpha(from red / 50%)');
/* Progressive enhancement in CSS */
.card-overlay {
/* Fallback for older browsers */
background: rgba(59, 130, 246, 0.4);
}
@supports (background-color: alpha(from red / 50%)) {
.card-overlay {
/* alpha() keeps the color in one expression */
background: alpha(from var(--brand-color) / 40%);
}
}
/* JavaScript helper for non-supporting browsers */
function alphaFallback(color, pct) {
if (SUPPORTS_ALPHA) return `alpha(from ${color} / ${pct}%)`;
// Parse hex → rgba manually for fallback
const hex = color.replace('#', '');
const r = parseInt(hex.slice(0, 2), 16);
const g = parseInt(hex.slice(2, 4), 16);
const b = parseInt(hex.slice(4, 6), 16);
return `rgba(${r}, ${g}, ${b}, ${pct / 100})`;
}
/* Relative Color Syntax alternative (Chrome 119+, no alpha()) */
/* oklch(from var(--brand) l c h / 40%) */
see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗