This is a brief blog post about some experiments playing with the new caret-animation and caret-shape CSS properties.

Current status #

It’s been a while since Igalia worked on adding support for caret-color property in Chromium/Blink (see my blog post from 2017) and more recently we have also been working on more properties to customize the insertion caret (see Stephen Chenney blog post from October last year).

Since then things have progressed and now caret-animation is shipping in Chromium since version 139 and caret-shape is being developed. So you can already start playing with these properties by enabling the experimental web platform features in Chromium since version 140.0.7288 (chrome://flags#enable-experimental-web-platform-features).

Some examples #

caret-shape syntax is pretty simple:

caret-shape: auto | bar | block | underscore

The initial value is auto which means the browser can determine the shape of the caret to follow platform conventions in different situations, however so far this is always using a bar caret (|). Then you can decide to use either a block (█) or underscore (_) caret, which might be useful and give a nice touch to some kinds of applications like a code editor.

Next you can see a very simple example which modifies the value of the caret-shape property so you can see how it works.

As you might have noticed we’re only using caret-shape: block property and not setting any particular color for it, in order to ensure the characters are still visible, the current Chromium implementation adds transparency to the block caret.

Let’s now combine the three CSS caret properties in a single example. Imagine we want a more fancy insertion caret that uses the block shape but blinks between two colors. To achieve something like this we have to use caret-color and also caret-animation so we can control how the caret is animated and change the color through CSS animations.

The source code of the following example is quite simple:

textarea {
  color: white;
  background: black;
  caret-shape: block;
  caret-animation: manual;
  animation: caret-block 2s step-end infinite;
}

@keyframes caret-block {
   0% { caret-color: #00d2ff; }
  50% { caret-color: #ffa6b9; }
}

As you can see we’re using caret-shape: block to define we want a block insertion caret, and also caret-animation: manual which makes the browser to stop animating the caret. Thus we have to use our own animation that modifies caret-color to switch colors.

Similar to that you can create a rainbow caret with a fancier animation 🌈.

Or a caret that switches between block and underscore shapes.

These are just some quick examples about how to use these new properties, you can start experimenting with them though caret-shape is still in the oven but implementation is in active development. Remember that if you want to play with the linked examples you have to enable the experimental web platform features flag (via chrome://flags#enable-experimental-web-platform-features or passing -enable-experimental-web-platform-features).

Thanks to my colleagues Stephen Chenney and Ziran Sun that have been working on the implementation of these features and Bloomberg for sponsoring this work as part of the ongoing collaboration with Igalia to improve the web platform.

Igalia and Bloomberg working together to build a better web