Azure: blue liquid glass that reads as the main action

About the material

Azure starts from #0a84ff, the blue most people already read as the system accent. The tint sits at about 0.56 opacity over a 28 px backdrop blur with saturation doubled, and an SVG displacement map bends the content underneath with a refraction strength of 38, the strongest in the tinted set. A #9fd0ff rim catches the light, so the edge survives busy photos. Compared with flat glassmorphism, this liquid glass CSS feels dense and alive rather than milky.

Blue signals trust and action, which makes Azure a natural fit for the things you want tapped: a primary button, the active tab, a switch, a toolbar that should feel native. It looks best over dark scenes and media. Keep long-form text and nested glass off it: a colored surface tires the eye over paragraphs, and two stacked blur layers fight each other. Selected tabs and segments get a bright plate with deep-blue text, so the current choice is obvious.

With Reduce Transparency or solid quality, Azure does not collapse into a gray slab: the tint is mixed into an opaque base, the blue survives and text contrast stays at 7:1 or better. Increase Contrast thickens the rim to 2 px. Try it on all 12 components and 24 backdrops in the studio, then export HTML/CSS, Tailwind, SwiftUI or JSON, or let an agent call generateCode({ component: 'button', preset: 'azure' }).

Best for

• Primary buttons and calls to action
• Active tabs and segmented controls
• System-style toolbars
• Media controls over video

Parameters

Where to use it

Best on: dark backgrounds, photos and video.
Avoid: long-form content, glass nested in glass.

Code

import { generateCode } from
  '/releases/2.2.0/sdk/core/index.js';

const result = generateCode({
  component: 'button', preset: 'azure'
});

The SDK runs without the DOM: swap in the component you need, the preset stays the same.