CSS revert-layer

CSS revert-layer

revert-layer rolls back a property to the value it held in the previous cascade layer — without touching values from other layers or the author stylesheet. It’s the surgical undo that revert and unset can’t provide.

@layer base {
  .button {
    background: oklch(55% 0.2 250);
    color: white;
  }
}

@layer theme {
  .button {
    background: revert-layer;
  } /* reverts to @layer base value */
}

The button gets the base layer background, not the browser default.

The Cascade Layer Undo Stack

The CSS cascade now has layers, and revert-layer pops one level off the stack per declaration:

@layer reset {
  h2 {
    margin: 0;
  }
}
@layer base {
  h2 {
    margin-block: 1rem;
  }
}
@layer theme {
  h2 {
    margin-block: revert-layer;
  }
} /* → 1rem from base */
@layer local {
  h2 {
    margin-block: revert-layer;
  }
} /* → 1rem from theme (which is base) */

Each revert-layer looks one layer back, not all the way to the browser default.

Versus revert and unset

Value	Reverts to
revert-layer	Previous cascade layer
revert	Browser (UA) stylesheet
unset	Inherited value or initial
initial	CSS property initial value

revert-layer is the only keyword that interacts with @layer — the others ignore layers entirely.

Practical: Opt Out of a Theme Layer

A common pattern is a design system @layer base and a per-page @layer overrides. Use revert-layer in overrides to selectively undo theme choices without duplicating values:

@layer base {
  .card {
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
  }
}

@layer overrides {
  .card--flat {
    box-shadow: revert-layer; /* removes the shadow, falls back to base */
    border-radius: revert-layer;
  }
}

In Unlayered Styles

If a rule is not in any layer, revert-layer behaves like revert — it reverts to the browser default:

/* Not in any @layer */
.heading {
  font-size: revert-layer; /* → browser UA font-size */
}

With @layer and Custom Properties

revert-layer works on custom properties too:

@layer tokens {
  :root {
    --color-accent: oklch(55% 0.2 250);
  }
}
@layer theme {
  :root {
    --color-accent: oklch(65% 0.2 145);
  }
}
@layer local {
  :root {
    --color-accent: revert-layer;
  }
} /* → theme value */

Feature Detection

@supports (color: revert-layer) {
  /* revert-layer is supported */
}

revert-layer shipped in Chrome 99, Firefox 97, and Safari 15.4 — all evergreen browsers support it.

---