Materials

Understand the tokens behind frosted, regular, and clear glass surfaces.

Liquidify exposes three material grades: frosted, regular, and clear. Each grade resolves to a generated group of blur, saturation, tint, opacity, border, and specular values.

Choose the grade through Material or a supported component material prop instead of assigning engine variables directly.

import { GlassPrimitive, Material } from "@liquidify/glass"

<Material default="frosted">
  <GlassPrimitive as="aside" aria-label="Inspector">
    {children}
  </GlassPrimitive>
</Material>

Choosing a grade

frosted provides the strongest separation over visually busy content.
regular is the balanced default for most glass surfaces.
clear preserves the most backdrop detail and suits calm backgrounds.

The glass-engine-* variables are renderer inputs such as displacement scale, edge attenuation, and saturation. They are public artifacts for inspection and advanced integration, but the provider and primitive APIs are the stable customization boundary.

See Customizing materials for scoped application patterns.

Materials

Understand the tokens behind frosted, regular, and clear glass surfaces.

Liquidify exposes three material grades: frosted, regular, and clear. Each grade resolves to a generated group of blur, saturation, tint, opacity, border, and specular values.

Choose the grade through Material or a supported component material prop instead of assigning engine variables directly.

import { GlassPrimitive, Material } from "@liquidify/glass"

<Material default="frosted">
  <GlassPrimitive as="aside" aria-label="Inspector">
    {children}
  </GlassPrimitive>
</Material>

Choosing a grade

frosted provides the strongest separation over visually busy content.
regular is the balanced default for most glass surfaces.
clear preserves the most backdrop detail and suits calm backgrounds.

See Customizing materials for scoped application patterns.