Skip to content
CodeAtlas UI

Surfaces

Glass Surface

The foundational glass material component with configurable thickness, tint, glow and optional refraction.

<script>
  import { GlassSurface } from "@codeatlasdev/ui";
</script>

<GlassSurface thickness="thin" tinted>…</GlassSurface>

GlassSurface is the low-level material. Prefer Glass Card for content containers. Extra attributes are forwarded to the root element. Do not add will-change: transform to a glass element or its ancestors, since it breaks backdrop-filter.

Interactive

Adjust the controls to preview each variant.

regular

GlassSurface

Code
svelte 
<script lang="ts">
  import { Checkbox, GlassSurface, SegmentedControl } from '@codeatlasdev/ui';
  import type { Thickness } from '@codeatlasdev/ui';

  const tiers: Thickness[] = ['ultra-thin', 'thin', 'regular', 'thick', 'chrome'];
  let thickness = $state<Thickness>('regular');
  let tinted = $state(false);
  let glowing = $state(false);
</script>

<div class="controls">
  <SegmentedControl
    aria-label="Thickness"
    items={tiers.map((t) => ({ value: t, label: t }))}
    bind:value={thickness}
  />
  <div class="group">
    <Checkbox label="Tinted" bind:checked={tinted} />
    <Checkbox label="Glowing" bind:checked={glowing} />
  </div>

  <div class="backdrop">
    <GlassSurface {thickness} {tinted} {glowing} refraction={false} class="preview">
      <p class="name">{thickness}{tinted ? ' · tinted' : ''}{glowing ? ' · glowing' : ''}</p>
      <p class="sub">GlassSurface</p>
    </GlassSurface>
  </div>
</div>

<style>
  .controls { display: flex; flex-direction: column; gap: var(--ca-space-3); width: 100%; }
  .group { display: flex; align-items: center; gap: var(--ca-space-2); flex-wrap: wrap; }
  .label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ca-font-size-caption);
    font-weight: 500;
    color: var(--ca-text-secondary);
    cursor: pointer;
  }
  :global(.preview) { padding: 32px 48px; border-radius: var(--ca-radius-lg); text-align: center; min-width: 200px; }
  .name { margin: 0 0 4px; font-family: var(--ca-font-mono); font-size: var(--ca-font-size-body1); font-weight: 600; color: var(--ca-text-primary); }
  .sub { margin: 0; font-size: var(--ca-font-size-caption); color: var(--ca-text-secondary); }
</style>

All tiers side by side

ultra-thin

thin

regular

thick

chrome

Code
svelte 
<script lang="ts">
  import { GlassSurface } from '@codeatlasdev/ui';
  import type { Thickness } from '@codeatlasdev/ui';

  const tiers: Thickness[] = ['ultra-thin', 'thin', 'regular', 'thick', 'chrome'];
</script>

<div class="backdrop">
  {#each tiers as t}
    <GlassSurface thickness={t} refraction={false} class="tier">
      <p>{t}</p>
    </GlassSurface>
  {/each}
</div>

<style>
  .backdrop {
    background: linear-gradient(135deg, var(--ca-brand-dark), var(--ca-semantic-info), var(--ca-semantic-success));
    border-radius: var(--ca-radius-lg);
    padding: var(--ca-space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ca-space-3);
    width: 100%;
  }
  :global(.tier) { flex: 1; min-width: 100px; padding: 20px; border-radius: var(--ca-radius-md); text-align: center; }
  p { margin: 0; font-family: var(--ca-font-mono); font-size: var(--ca-font-size-caption); font-weight: 600; color: var(--ca-text-primary); }
</style>

Props

PropTypeDefaultDescription
thickness'ultra-thin' | 'thin' | 'regular' | 'thick' | 'chrome''regular'Material tier controlling blur and opacity.
tintedbooleanfalseAdds the brand accent gradient overlay.
glowingbooleanfalseAdds a backlit glow halo.
refractionbooleantrueRenders the LiquidGlass SVG refraction overlay.
classstring''Extra class names.
stylestring''Inline style string.
childrenSnippetundefinedSlot content.