Updated: 2026-07-11
⚙️ Caret Color Settings
Customize the text input cursor (caret) color.
👁️ Live Preview
Click on the input fields below and observe the caret color. Try typing to see the effect.
💻 CSS Code
📖 CSS caret-color Explained
The caret-color property controls the color of the text insertion cursor (caret) in input fields, textareas, and contenteditable elements. It's purely visual and doesn't affect functionality.
When to use CSS Caret-color Generator
- Brand consistency — match caret color to brand color
- Dark mode — bright caret on dark backgrounds for better visibility
- Error states — change caret to red on validation failure
- Hidden caret — use transparent to hide caret in certain UI modes
Browser Support
All modern browsers support caret-color without prefixes.