accent-color
Sets the accent color for user-interface controls like checkboxes, radio buttons, and range sliders. It allows you to style native forms with your brand color with a single line of CSS.
Quick example
form.brand-theme {
accent-color: var(--primary-color);
/* styles all native checkboxes and radio buttons to match your brand */
}Quick facts
Initial value
autoInherited
Yes
Applies to
all elements
Animation type
byComputedValueType
Values
auto accent-color Browser Support
Widely available Since 2022 94% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Safe to use without fallbacks.
93+
92+
15.4+
93+