The caret-color CSS property

You can change color of the insertion caret, the visible marker where the next character typed will be inserted. The caret appears in elements such as <input> or those with the contenteditable attribute:

input {
  caret-color: blue;
}

textarea {
  caret-color: green;
}

<h1 contenteditable="true">
  This is editable heading.
</h1>

h1 {
  caret-color: blue;
}

This site is ad-free and doesn’t use trackers. If you’d like to support my writing, I’d love if you could buy me a coffee.