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.

It is documented as part of the CSS Basic User Interface specification.

/* Usage Example */
form.brand-theme {
  accent-color: var(--primary-color);
  /* styles all native checkboxes and radio buttons to match your brand */
}

/* Syntax */
accent-color: auto;

/* Global values */
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;

This comparison shows how accent-color works in a real project. View snippet →

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.

93+
92+
15.4+
93+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC