7 Uses for CSS Custom Properties

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

I find all seven of these quite clever and useful.

I particularly like using custom properties when you can sneak a variation into a place where you’d normally have to re-declare a whole big chunk of code.

.some-element {
  background-color: hsla(
    var(--h, 120),
    var(--s, 50),
    var(--l, 50),
    var(--a, 1)

.some-element.darker {
  --l: 20;


Direct Link →