CSS Accent Color Generator

The accent-color CSS property sets the accent color for user-interface controls generated by certain elements. It provides a simple way to style form elements without complex CSS or appearance hacks.

Affected Elements

• <input type="checkbox"> - The check indicator color
• <input type="radio"> - The selected indicator color
• <input type="range"> - The thumb and filled track color
• <progress> - The progress indicator color

Browser Support

The accent-color property is supported in all modern browsers:

• Chrome 93+ (August 2021)
• Firefox 92+ (September 2021)
• Safari 15.4+ (March 2022)
• Edge 93+ (August 2021)

Usage Example

/* Apply to all form elements */
:root {
  accent-color: #3b82f6;
}

/* Or target specific elements */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: #3b82f6;
}