color mixing with modern css

Love the latest CSS color enhancements! It includes a great new color-mix() utility that has very solid browser support. My favourite use-case is tweaking the opacity of an existing CSS variable:

--cursor-color: #223;
background-color: color-mix(in srgb, var(--cursor-color) 70%, transparent);

Results in:

It’s also great for lightening/darkening colors and generating color palettes:

.bg-blue {
  background-color: blue;
}
.bg-blue-light {
  background-color: color-mix(in srgb, blue, white);
}
.bg-blue-lighter {
  background-color: color-mix(in srgb, blue, white 75%);
}
.bg-blue-dark {
  background-color: color-mix(in srgb, blue, black);
}
.bg-blue-darker {
  background-color: color-mix(in srgb, blue, black 75%);
}