REVA / OPTIONAL MATERIALS

Light, through glass.

Frosted surfaces. Native controls. Your existing design attributes.

Explore the controlsSee local overrides

01 / SURFACES

Calm by default.

Blur and a subtle surface sheen preserve the shape and depth you choose.

A 32% surface backing provides the frosted layer. Review text against your actual backdrop.

How it works

Load the optional stylesheet and add data-material="glass" to a component or parent.

02 / LOCAL THEMES

Your own atmosphere.

A local theme or tone changes this surface without changing its neighbours.

03 / NATIVE CONTROLS

Clarity comes first.

Shared attributes, local choices.

Compact and square

Flat depth, a defined border, and no decorative gradient.

Space to breathe

More padding, larger type, and bounded pill rounding.

A deliberate solid reset.

This section opts out of glass, keeping the inherited theme and other settings.

Glass can resume locally

An explicit glass attribute starts a new material scope.

A material, not a colour mode.

The extension adds surface treatment to RevaCSS.

Use these styles in your own layouts.

Set the material on one component or a surrounding section.

Shared attributes stay shared.

This is a static HTML and CSS demonstration.