Foundation
Materials Liquid Glass material tiers from ultra-thin translucency to opaque chrome, plus tint, glow and button variants.
Materials are CSS classes (glass-ultra-thin, glass-thin, glass-regular, glass-thick, glass-chrome) backed by backdrop-filter. GlassSurface applies them for you and can add a refraction layer.
< script > import { GlassSurface } from "@codeatlasdev/ui" ; </ script > < GlassSurface thickness = "thick" tinted >Content</ GlassSurface > The surface style on <html data-style> changes every material at once: glass (default), frosted (less blur), solid and flat (no blur, no mesh). Switch it with colorScheme.setStyle(), see Theming . Browsers with prefers-reduced-transparency: reduce automatically get opaque surfaces.
Glass tiers All five thickness levels on a gradient backdrop.
Ultra thin
Subtle background hint
Regular
Standard glass surface
Thick
Strong frosted effect
Code <script lang="ts">
import { GlassSurface, type Thickness } from "@codeatlasdev/ui";
const tiers: { thickness: Thickness; label: string; desc: string }[] = [
{ thickness: "ultra-thin", label: "Ultra thin", desc: "Subtle background hint" },
{ thickness: "thin", label: "Thin", desc: "Light translucency" },
{ thickness: "regular", label: "Regular", desc: "Standard glass surface" },
{ thickness: "thick", label: "Thick", desc: "Strong frosted effect" },
{ thickness: "chrome", label: "Chrome", desc: "Opaque chrome bar" },
];
</script>
<div class="backdrop">
{#each tiers as tier (tier.thickness)}
<GlassSurface thickness={tier.thickness} class="tier" refraction={false}>
<p class="label">{tier.label}</p>
<p class="desc">{tier.desc}</p>
</GlassSurface>
{/each}
</div>
<style>
.backdrop {
display: flex;
flex-wrap: wrap;
gap: var(--ca-space-3);
width: 100%;
padding: var(--ca-space-6);
border-radius: var(--ca-radius-lg);
background: linear-gradient(135deg, var(--ca-brand-main) 0%, var(--ca-semantic-info) 50%, var(--ca-semantic-success) 100%);
}
.backdrop :global(.tier) {
flex: 1;
min-width: 8.5rem;
padding: var(--ca-space-5) var(--ca-space-6);
border-radius: var(--ca-radius-md);
}
.label {
margin: 0 0 var(--ca-space-1);
font-weight: 600;
color: var(--ca-text-primary);
}
.desc {
margin: 0;
font-size: var(--ca-font-size-caption);
color: var(--ca-text-secondary);
}
</style> glass-btn, glass-btn-prominent and glass-btn-clear for custom controls.
glass-btn glass-btn-prominent glass-btn-clear
Code <div class="backdrop">
<button type="button" class="glass-btn">glass-btn</button>
<button type="button" class="glass-btn-prominent">glass-btn-prominent</button>
<button type="button" class="glass-btn-clear">glass-btn-clear</button>
</div>
<style>
.backdrop {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ca-space-3);
width: 100%;
padding: var(--ca-space-8) var(--ca-space-6);
border-radius: var(--ca-radius-lg);
background: linear-gradient(135deg, var(--ca-brand-main), var(--ca-semantic-info));
}
.backdrop button {
padding: 10px 22px;
border: none;
border-radius: var(--ca-radius-md);
font: 500 var(--ca-font-size-button) var(--ca-font-sans);
cursor: pointer;
}
</style> Tinted and glowing glass-tinted adds an accent gradient, glass-glow adds a backlit halo.
Code <script lang="ts">
import { GlassSurface } from "@codeatlasdev/ui";
</script>
<div class="backdrop">
<GlassSurface thickness="regular" tinted refraction={false} class="chip">
<p>Tinted</p>
</GlassSurface>
<GlassSurface thickness="regular" glowing refraction={false} class="chip">
<p>Glowing</p>
</GlassSurface>
<GlassSurface thickness="regular" tinted glowing refraction={false} class="chip">
<p>Tinted + glowing</p>
</GlassSurface>
</div>
<style>
.backdrop {
display: flex;
flex-wrap: wrap;
gap: var(--ca-space-3);
width: 100%;
padding: var(--ca-space-6);
border-radius: var(--ca-radius-lg);
background: linear-gradient(135deg, var(--ca-brand-main) 0%, var(--ca-semantic-info) 50%, var(--ca-semantic-success) 100%);
}
.backdrop :global(.chip) {
flex: 1;
min-width: 8.5rem;
padding: var(--ca-space-5) var(--ca-space-6);
border-radius: var(--ca-radius-md);
}
p {
margin: 0;
font-weight: 600;
color: var(--ca-text-primary);
}
</style> GlassSurface props Prop Type Default Description thickness'ultra-thin' | 'thin' | 'regular' | 'thick' | 'chrome''regular'Material tier. tintedbooleanfalseAdds an accent gradient (glass-tinted). glowingbooleanfalseAdds a backlit halo (glass-glow). refractionbooleantrueRenders the LiquidGlass refraction layer behind the content. classstring''Extra classes. stylestring''Inline style string, for dynamic custom properties only. childrenSnippet– Surface content.