layer()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2022⁩.

The layer() CSS function is used along with the @import at-rule to put the imported resource in a separate named cascade layer.

Syntax

css

@import url layer(layer-name);
@import "dark.css" layer(framework.themes.dark);

The framework.themes.dark is the layer into which the CSS file would be imported.

layer() = 
  layer( <layer-name> )  

<layer-name> = 
  <ident> [ '.' <ident> ]*

Specification
CSS Cascading and Inheritance Level 5 # ref-for-typedef-layer-name

This page was last modified on ⁨Jul 23, 2025⁩ by MDN contributors.