CSS `@layer` (Cascade Layers)

Organize, control, and master the CSS cascade with modern layering!

What is CSS `@layer`?

CSS @layer introduces Cascade Layers, a powerful way to group related styles and control their order in the cascade—before specificity and source order. Layers help you avoid specificity wars, manage overrides, and build scalable, maintainable stylesheets.

Explicit Cascade Order: Define the order of your layers, so you always know which styles win.
Layered Organization: Group resets, base styles, components, utilities, and overrides into logical layers.
Predictable Overrides: Styles in later layers override earlier ones, regardless of selector specificity.
Unlayered Styles: Styles not in a layer always win over layered styles.

Basic Syntax

@layer reset, base, components, utilities, overrides;

@layer reset {
  * { margin: 0; padding: 0; }
}
@layer base {
  body { font-family: sans-serif; }
}
@layer components {
  .btn { background: #4f8cff; color: #fff; }
}
@layer utilities {
  .text-red { color: red; }
}

💡 Tip: The last declared layer wins, regardless of selector specificity. Unlayered styles always win over layered styles!

Browser Support: CSS @layer is supported in all modern browsers (Chrome 99+, Edge 99+, Firefox 97+, Safari 15.4+).

Interactive Examples

Layered Button Styles

@layer base, components, utilities;

@layer base {
  .btn {
    background: #e3e9f7;
    color: #2a4d8f;
  }
}
@layer components {
  .btn {
    background: #4f8cff;
    color: #fff;
    border-radius: 0.4rem;
    padding: 0.7rem 1.5rem;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
  }
  .btn:hover {
    background: #2a4d8f;
  }
}
@layer utilities {
  .text-red {
    color: red;
  }
}

Layer Order vs. Specificity

Layered Box

@layer base, overrides;

@layer base {
  .layer-demo-box {
    background: #f0f4fa;
    color: #2a4d8f;
    padding: 1.2rem;
    border-radius: 0.8rem;
    font-weight: 600;
  }
}
@layer overrides {
  .layer-demo-box {
    background: #ffd200;
    color: #be185d;
  }
}
/* This unlayered style always wins! */
.layer-demo-box {
  border: 2px solid #4f8cff;
}

Unlayered Styles Override Layers

Unlayered Always Wins

@layer base, overrides;

@layer base {
  .unlayered-demo {
    background: #f0f4fa;
    color: #2a4d8f;
  }
}
@layer overrides {
  .unlayered-demo {
    background: #ffd200;
    color: #be185d;
  }
}
/* Unlayered style (always wins) */
.unlayered-demo {
  background: #4f8cff;
  color: #fff;
}

Try it: The button and boxes above are styled using different layers. Unlayered styles (outside any @layer) always take precedence!