Glassmorphism

Where it comes from

Operating systems began putting frosted, translucent panels over their backgrounds once graphics hardware could blur what sits behind a layer in real time. The idea is about depth: a control layer floats above the content layer, and you can see that the content continues underneath. When it spread to the web it became a look in its own right, usually over a gradient or a photo.

It is expressive and it is fragile. The text on a glass panel sits on whatever happens to be behind it, so legibility depends on the backdrop, on the blur and on the tint all at once. It works best as a layer for a few controls and overlays, not as the surface of everything.

Written by us, in our own words, as background. It is not a claim about users.

Traits

Type

Nothing special: the style leaves type alone. Weight and size matter more than usual because the background is busy; use the regular text weight at body size or larger.

--ca-font-sans --ca-font-weight-heading

Colour

A colourful or photographic backdrop (the page mesh) with the panel tinted by the surface colour. The glass rim is a one-pixel highlight, bright in light mode and fainter in dark.

--ca-glass-rim --ca-glass-tint --ca-page-mesh --ca-brand-main

Shape

Generously rounded corners (about 1.4 times the default scale) and a large control radius, so panels read as soft sheets.

--ca-radius-scale --ca-radius-control

Depth

The whole point: a stronger backdrop blur with extra saturation, three thicknesses (thin, regular, thick), a soft shadow and a little grain so large blurred areas do not band.

--ca-blur-thin --ca-blur-regular --ca-blur-thick --ca-noise-opacity --ca-glass-shadow

Motion

Smooth and emphasized at the default speed: panels ease in rather than snap.

--ca-motion-scale --ca-ease-standard

Before and after, on real components

The same components twice: with the package default and with this style. Use the toggle to flip between them or put them side by side.

Do and don't

These are our own guidance for using the recipe well. The accessibility items below carry their sources.

Accessibility pitfalls

Each item names what goes wrong, what the library already does about it and what is left to you.

Text contrast depends on what is behind the panel, so it changes as content scrolls

What to do. Raise the tint of the layer that holds text (use the regular or thick tier for body text), and test the worst backdrop. Use an opaque base behind long text.

A faint rim may not be enough to identify a control

What to do. Give inputs and buttons a stronger outline token or a fill, not only the highlight rim.

Platform guidance treats glass as a separate control layer, not as a surface for content

What to do. Use glass for navigation and controls that float over content, and keep the content itself on a solid layer.

Components that fit

Media, dashboards over a hero visual, landing pages and overlays: a few floating layers over rich content.

Avoid it when: Dense tables, long text, low-end devices, or any screen where legibility cannot be guaranteed over the backdrop.

Where it fits is our judgement from using the recipe, not a measured result.

• Card: The panel itself: `elevation` 2, 3 and 4 are the thin, regular and thick glass tiers.
• Tabs: A pill tab list is a glass control over content.
• Badge: Small tinted status pills.
• Alert: A tinted banner that still reads over the backdrop.

Overlays such as Dialog and Tooltip render in the page body, outside this style's subtree, so they are not shown here. Apply the style to the whole site to see them wear it.

The ThemeOptions recipe

One call in src/lib/theme.ts. Everything below is what the recipe sets; override any of it on top.

import { designStyle, type ThemeOptions } from "@codeatlasdev/ui";

export const theme: ThemeOptions = designStyle("glassmorphism");

With your own brand colour on top:

import { designStyle, type ThemeOptions } from "@codeatlasdev/ui";

export const theme: ThemeOptions = designStyle("glassmorphism", {
	presets: [{ id: "acme", color: "#ff5c00" }],
	defaultPreset: "acme",
});

{
	"defaultStyle": "glass",
	"radius": 1.4,
	"controlRadius": "lg",
	"elevation": "soft",
	"noise": 0.03,
	"overrides": {
		"light": {
			"--ca-blur-thin": "blur(18px) saturate(180%)",
			"--ca-blur-regular": "blur(28px) saturate(190%)",
			"--ca-blur-thick": "blur(36px) saturate(200%)",
			"--ca-glass-rim": "oklch(1 0 0 / 0.9)"
		},
		"dark": {
			"--ca-blur-thin": "blur(18px) saturate(180%)",
			"--ca-blur-regular": "blur(28px) saturate(190%)",
			"--ca-blur-thick": "blur(36px) saturate(200%)",
			"--ca-glass-rim": "oklch(1 0 0 / 0.32)"
		}
	},
	"motion": {
		"scale": 1,
		"easing": "emphasized"
	},
	"iconStroke": 1.75
}

Try it on this site

Prompt for your AI

Paste this into a coding agent. It carries the recipe, the limits and the accessibility rules.

Build this interface in the "Glassmorphism" style with @codeatlasdev/ui: Translucent, blurred layers over a colourful backdrop, with thin rims and soft shadows.

1. In src/lib/theme.ts export `theme = designStyle("glassmorphism")` (import it from "@codeatlasdev/ui", or from "@codeatlasdev/ui/vite" in a file shared with vite.config). Add your brand as a preset on top: `designStyle("glassmorphism", { presets: [{ id: "brand", color: "#…" }], defaultPreset: "brand" })`.
2. Use the library components as they are. Change the look only through ThemeOptions or `--ca-*` tokens: no `!important`, no overrides of `.ca-*` classes, no hard-coded colours.
3. The style's traits: type: Nothing special: the style leaves type alone. Weight and size matter more than usual because the background is busy; use the regular text weight at body size or larger. Shape: Generously rounded corners (about 1.4 times the default scale) and a large control radius, so panels read as soft sheets. Depth: The whole point: a stronger backdrop blur with extra saturation, three thicknesses (thin, regular, thick), a soft shadow and a little grain so large blurred areas do not band. Motion: Smooth and emphasized at the default speed: panels ease in rather than snap.
4. Do: Put text on a tinted, thick-enough layer, not on a thin one over a busy picture. Use blur for a layer that floats above content (a toolbar, a sheet, a menu) and keep the content layer opaque. Test over the lightest and the darkest part of the backdrop, in both schemes. Provide the opaque fallback: with transparency reduced the panel should become a solid surface.
5. Do not: Do not stack glass on glass; blur compounds and the text loses its ground. Do not use it for dense data tables or long forms. Do not rely on a faint rim as the only edge of a control. Do not animate large blurred areas continuously; it costs frames on modest devices.
6. Accessibility, which this style puts at risk: Text contrast depends on what is behind the panel, so it changes as content scrolls. Raise the tint of the layer that holds text (use the regular or thick tier for body text), and test the worst backdrop. Use an opaque base behind long text. A faint rim may not be enough to identify a control. Give inputs and buttons a stronger outline token or a fill, not only the highlight rim. Platform guidance treats glass as a separate control layer, not as a surface for content. Use glass for navigation and controls that float over content, and keep the content itself on a solid layer.
7. Fits: Media, dashboards over a hero visual, landing pages and overlays: a few floating layers over rich content. Avoid it when: Dense tables, long text, low-end devices, or any screen where legibility cannot be guaranteed over the backdrop.
8. Keep content, hierarchy and behaviour identical to a plain baseline so the two can be compared. Do not claim the style performs better; validate it with your users.
Docs: https://ui.codeatlas.com.br/styles/glassmorphism/