Regular: the versatile, legible liquid glass

About the material

Regular follows the idea behind Apple's regular Liquid Glass: enough blur and tint to keep the content on top readable, enough transparency to let the backdrop's colour flow through. In numbers that means 24 px of blur, saturation pushed to 180%, a slight brightness lift and a white tint at 16%, finished with a white rim and moderate edge refraction. Colours behind the panel look richer instead of washed out, which is what separates liquid glass from flat glassmorphism.

Regular is at its best over dark interfaces and media: navigation and tab bars over a feed, editor toolbars, media controls over video, popovers and menus. As the most balanced of the optical materials, it is a sensible default before you reach for Clear, Lens or Prism. Keep it on the functional layer, and with custom images or video verify the rendered contrast, as a dedicated studio rule reminds you.

This is a web interpretation, not a pixel copy of the native renderer. Every browser gets the reduced baseline (blur, tint, rim); SVG edge refraction is added in full quality on Chromium after visual confirmation, while Safari and Firefox are not guaranteed refraction. Reduced transparency and increased contrast are handled by the preset itself. Export HTML/CSS, Tailwind, a SwiftUI wrapper or JSON, or let an agent call the SDK with the regular preset.

Best for

• Navigation and tab bars over a feed
• Media controls over video
• Editor toolbars in a dark theme
• A starting point for Apple-style web glass

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: 'regular'
});

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