No Login Data Private Local Save

caret‑color CSS Demo - Online Colorful Text Cursors

16
0
0
0

caret-color CSS Demo

Online Colorful Text Cursors — type below and see your custom caret color in action

The blinking vertical line (caret) uses caret-color. Select a color on the right panel.

Pick Your Caret Color
#
Visible on light bg Visible on dark bg
Presets
Light Background

White bg · dark text · custom caret

Dark Background

Dark bg · light text · custom caret

Textarea

Multi-line · same caret-color applies

Contenteditable
Editable rich text — caret still colorful

Rich text · caret-color still works

Generated CSS
input, textarea, [contenteditable] {
  caret-color: #3b82f6;
}

Paste this into your stylesheet. Works in all modern browsers (Chrome 57+, Firefox 53+, Safari 11+, Edge 79+).

Frequently Asked Questions
What is caret-color in CSS?

caret-color is a CSS property that sets the color of the text input cursor — the blinking vertical line (called a "caret") that appears inside <input>, <textarea>, and any element with contenteditable="true". It lets you customize the cursor color independently from the text color, which is great for branding, accessibility, and dark-mode designs.

How is caret-color different from the color property?

By default, browsers use the element's color value as the caret color. Setting caret-color overrides this, allowing the caret to be a different color than the text. For example, you can have dark text but a bright blue caret — making it easier to spot in long forms. If caret-color is set to auto (the default), the caret inherits the text color.

Does caret-color support gradients or animations?

No. The caret-color property only accepts solid color values (hex, rgb, hsl, named colors, or transparent). Gradients, conic gradients, and CSS animations are not supported for the native caret. If you need an animated or gradient cursor effect, you would need to build a custom fake caret using a <div> with JavaScript to track cursor position — but this is complex and not recommended for accessibility.

Can I hide the caret with caret-color: transparent?

Yes! Setting caret-color: transparent makes the blinking caret invisible while the element remains editable. This is sometimes used for sleek search bars or password-like fields where you want a clean look. However, use it cautiously — hiding the caret can harm accessibility and confuse users who rely on it to know where they're typing.

Which browsers support caret-color?

caret-color is widely supported: Chrome 57+, Firefox 53+, Safari 11+ (including iOS Safari), and Edge 79+. It's safe to use in production. For older browsers, the caret simply falls back to the default text color — no layout breakage occurs.

Does caret-color affect the mouse cursor?

No. The caret (text cursor) and the mouse cursor (pointer) are two entirely different things. The caret-color property only controls the blinking text insertion indicator. To change the mouse cursor, use the cursor CSS property (e.g., cursor: pointer;).

Why is my caret hard to see on dark backgrounds?

If your caret color is dark (like black or navy) and your input has a dark background, there won't be enough contrast. Always test your caret-color against the background. A good rule of thumb: for dark backgrounds, use bright caret colors (white, cyan, yellow, light blue); for light backgrounds, darker colors work well. Our tool above shows contrast indicators to help you choose wisely.

Can I use caret-color with ::selection or other pseudo-elements?

caret-color is a standalone property and does not interact directly with ::selection (which styles selected text highlights) or ::placeholder. However, you can combine them for a fully customized input experience — for example, a blue caret, a yellow selection highlight, and a gray placeholder, all in the same input field.

🔧 Related Tools