Webzstore
The CSS 'accent-color' property allows you to customize the color of certain user interface elements, like checkboxes, radio buttons, range sliders, and progress bars, in a webpage. It's a way to ensure these elements match the overall design of your site without having to create custom controls.
CSS 'accent-color' Property Examples
See the Pen CSS accent-color Property by Webzstore (@webzstore) on CodePen.
Using 'accent-color' is a straightforward way to customize the look and feel of form elements and other UI components in a way that's consistent with your site's design.
Browser Support
| Browser | Version | Released |
|---|---|---|
| Chrome | 93 | Aug 2021 |
| Edge | 93 | Sep 2021 |
| Firefox | 92 | Sep 2021 |
| Safari | 26.2 | Dec 2025 |
| Opera | 79 | Sep 2021 |
Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for accent-color for the full compatibility details, including mobile browsers.
CSS Syntax of the 'accent-color' Property
accent-color: auto|color|initial|inherit;
Usage of the accent-color Property
Use 'accent-color' to align the color of form controls and other UI elements with your website's theme. For example, suppose your site has a primary color scheme of blue. In that case, you can use accent-color to make checkboxes and radio buttons blue instead of their default browser styling.
Property Values of the 'accent-color' Property
- Auto: This is the default value. The browser chooses the accent color, typically based on the current color scheme or the system's preferences.
- Color: This option allows you to specify the accent color. You can use any legal CSS color value, such as RGB, HEX, HSL, or a named color.
- Initial: Sets the accent-color to its default value, which is auto.
- Inherit: Inherits the accent-color from its parent element.
