THEMES / MATERIAL

Glass material

Translucent surfaces with directional highlights, soft elevation and a visible backdrop. Configure the material once on a parent, then build with native HTML and minimal component classes.

DARK GLASS / LIVE COMPONENTS

A surface, with depth.

Colour and detail sit behind the frosted layer. Your content stays clear in front.

Use glass Open full preview

Ready to build

Native by design

One shared material. Your existing theme, accent and shape.

Surface backing: 32%
Action backing: 90%
Backdrop blur: 12px + 145% saturation

See the HTML below

Glass surfaces now use 32% tint with 12px blur and 145% saturation. Directional highlights and inset rim lighting suggest thickness without changing the HTML. Shared data-depth selects flat, subtle or pronounced elevation; data-border still controls border width and data-fill controls the decorative surface sheen. Buttons and small status surfaces retain 90% backing in this first refinement; text controls retain their existing backing.

This preview sets dark colours locally. The examples below show light, dark and solid exceptions.

Light preview Dark preview System preview

1. Load the material extension

Load the core first, then the optional glass stylesheet. Set material and theme on html for site-wide defaults, or on a section for a local interface.

<!doctype html>
<html lang="en" data-theme="dark" data-material="glass"
      data-accent="teal" data-shape="rounded">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My glass interface</title>
  <link rel="stylesheet" href="/assets/reva/reva.css">
  <link rel="stylesheet" href="/assets/reva/reva.glass.css">
</head>
<body>
  <main class="container">
    <article class="card">
      <h1>Welcome back</h1>
      <p>Shared settings reach supported descendants.</p>
      <button type="button">Continue</button>
    </article>
  </main>
</body>
</html>

The extension changes supported surfaces; it does not add a background image. Supply the page background in your own CSS. Glass needs colour or detail behind it to show its translucent treatment. The coloured backdrops here belong to the documentation demos.

2. Define shared defaults once

The cards and actions inherit their parent settings. No repeated material attributes are needed on each component.

One parent. A consistent surface.

The card and its button inherit the material and accent.

Ordinary HTML underneath

Use headings, paragraphs and links for their meaning.

Read about inheritance

<section class="stack" data-theme="dark" data-material="glass"
         data-accent="teal" data-shape="rounded">
  <article class="card">
    <h3>One parent. A consistent surface.</h3>
    <p>The card and its button inherit the material and accent.</p>
    <button type="button">Primary action</button>
  </article>
  <article class="card">
    <h3>Ordinary HTML underneath</h3>
    <p>Use headings, paragraphs and links for their meaning.</p>
    <a href="/RevaCSS/guide/styling/">Read about inheritance</a>
  </article>
</section>

3. Use light or dark colours

Glass is a material, not a separate colour mode. Use light, dark or auto with the same HTML. Explicit local themes remain independent of the documentation theme switch.

Light glass

A pale surface with a dark foreground.

Dark glass

A deep surface with a light foreground.

<div class="grid">
  <section class="stack" data-theme="light" data-material="glass"
           data-accent="violet" data-shape="rounded">
    <article class="card">
      <h3>Light glass</h3>
      <p>A pale surface with a dark foreground.</p>
      <button type="button">Continue</button>
    </article>
  </section>
  <section class="stack" data-theme="dark" data-material="glass"
           data-accent="violet" data-shape="rounded">
    <article class="card">
      <h3>Dark glass</h3>
      <p>A deep surface with a light foreground.</p>
      <button type="button">Continue</button>
    </article>
  </section>
</div>

4. Keep actions and forms consistent

Actions use stronger backing. The fieldset receives glass; text fields and switches keep their normal control backing. These example buttons do not perform application actions.

Notification preferences

Email address This field keeps its normal control backing.

Email notifications

<section class="stack" data-material="glass" data-accent="teal"
         data-shape="rounded" data-variant="primary">
  <div class="row" role="group" aria-label="Example actions">
    <button type="button">Continue</button>
    <button type="button" class="secondary">Back</button>
    <button type="button" class="outline">Outline</button>
    <button type="button" data-variant="danger">Delete</button>
    <button type="button" disabled>Unavailable</button>
  </div>
  <fieldset>
    <legend>Notification preferences</legend>
    <div class="form-group">
      <label for="glass-guide-email">Email address</label>
      <input id="glass-guide-email" type="email" name="email"
             autocomplete="email" placeholder="you@example.com"
             aria-describedby="glass-guide-email-help">
      <small id="glass-guide-email-help">This field keeps its normal control backing.</small>
    </div>
    <label>
      <input class="switch" type="checkbox" role="switch" checked>
      Email notifications
    </label>
  </fieldset>
</section>

data-variant keeps its shared meaning for actions, badges and alerts. A local variant changes an exception. outline and ghost are button presentation classes; data-appearance remains specific to badges and alerts.

5. Add feedback and status

Existing alerts, badges and list groups follow the material scope. Use visible status text; a static message needs no automatic live-region role.

Saved. Your preferences are up to date.

Workspace status

Active All services available

Shared colour and material settings
Native links and semantic content

<section class="stack" data-material="glass" data-shape="rounded">
  <div class="alert" data-variant="success">
    <strong>Saved.</strong> Your preferences are up to date.
  </div>
  <article class="card">
    <h3>Workspace status</h3>
    <p><span class="badge" data-variant="success">Active</span> All services available</p>
    <ul class="list-group" role="list">
      <li>Shared colour and material settings</li>
      <li>Native links and semantic content</li>
    </ul>
  </article>
</section>

6. Make deliberate solid exceptions

A nearer solid value ends glass treatment without resetting other settings. A nested glass value can restart it. Avoid stacking several blurred surfaces directly over one another.

Glass by default

The parent starts the material scope.

A solid exception

Only material changes. Theme and shape still inherit.

Glass resumes locally

A nearer glass value starts a new material scope.

<section class="stack" data-theme="dark" data-material="glass">
  <article class="card">
    <h3>Glass by default</h3>
    <p>The parent starts the material scope.</p>
  </article>
  <section class="stack" data-material="solid">
    <article class="card">
      <h3>A solid exception</h3>
      <p>Only material changes. Theme and shape still inherit.</p>
      <button type="button">Solid action</button>
    </article>
    <article class="card" data-material="glass">
      <h3>Glass resumes locally</h3>
      <p>A nearer glass value starts a new material scope.</p>
    </article>
  </section>
</section>

Component coverage

What changes when the parent uses glass
Components	Material treatment
Cards, fieldsets, details, dialogs and popovers	Frosted surface backing and blur. Surface opacity defaults to 32%.
Top navigation, its panels and standalone dropdown panels	Frosted surfaces. Menu toggles and dropdown rows keep neutral navigation styling.
Buttons, .button links and native action inputs	Stronger coloured backing and blur. Action opacity defaults to 90%.
Badges, alerts, pagination items, list items and choice-panel labels	Stronger backing and blur, with their existing states and semantic variants.
Text fields, selects, textareas and switches	Keep their normal control backing and native behaviour.
Icons, breadcrumbs, toolbars and layout wrappers	Keep their normal foreground or layout behaviour; no extra glass surface is painted.

Core and glass must use matching global or scoped builds. The extension alone does not supply component structure or interaction.

Keep the shared API

data-theme selects light, dark or system colours.
data-material selects glass or solid surface treatment.
data-shape, data-density, data-border and data-depth retain their existing meanings.
data-fill="solid" removes decorative gradients; it does not remove translucency. Use data-material="solid" for that.
Animated edges remain optional button/card decoration. Glass does not enable animation by default.

7. Adjust only what you need

Defaults are a starting point. This example increases surface and action backing instead of making the material more transparent.

A stronger surface backing

Optional custom properties apply from the parent.

<section data-material="glass" data-theme="dark"
         style="--re-glass-opacity: 80%; --re-glass-button-opacity: 95%; --re-glass-filter: blur(12px);">
  <article class="card">
    <h3>A stronger surface backing</h3>
    <p>Optional custom properties apply from the parent.</p>
    <button type="button">Continue</button>
  </article>
</section>

Property	Default	Meaning
`--re-glass-opacity`	32%	Surface backing. Use a percentage, not a decimal alpha.
`--re-glass-button-opacity`	90%	Action and supporting small-surface backing.
`--re-glass-shadow`	Shared subtle depth	Outer elevation and inset rim shadows. Follows data-depth; flat removes shadows.
`--re-glass-filter`	blur(12px) saturate(145%)	Backdrop filter on supported glass surfaces.

Preferences and fallback

data-contrast="more" requests opaque backing. Supported reduced-transparency and increased-contrast preferences also remove translucency. Forced colours use system colours; print uses opaque component fallbacks and hides navigation popovers.

Without backdrop-filter support, surfaces retain the normal opaque core styling. Preference treatment respects local solid boundaries. Shared motion settings and reduced-motion preferences still apply to any optional decoration.

Readability depends on the actual backdrop, foreground and opacity together. Blur alone cannot guarantee contrast. Keep essential content readable, avoid unnecessary nested blur, and review real-device performance before release. Browser and assistive-technology validation remains pending.

8. Use a scoped boundary when needed

Choose the scoped core and its matching glass extension. Keep overlay markup inside the configured .reva boundary so inheritance is preserved.

<link rel="stylesheet" href="/assets/reva/reva.scoped.css">
<link rel="stylesheet" href="/assets/reva/reva.glass.scoped.css">

<section class="reva" data-theme="dark" data-material="glass"
         data-accent="teal" data-shape="rounded">
  <article class="card">
    <h2>A scoped glass interface</h2>
    <p>Supported descendants use this boundary's settings.</p>
    <button type="button">Continue</button>
  </article>
</section>

CSS token reference · Inheritance and local overrides · Behaviour and accessibility