Milk: nearly opaque milk glass

About the material

Milk sits at the far end of the light group. A pure white tint at 72% opacity, a strong inner glow and the brightest rim in the catalogue (90%) produce a surface that is mostly milk and only a little glass: under 30 px of blur the backdrop survives as a faint wash of colour. Refraction is the lowest of the five light materials and the shadow is the lightest, so Milk feels flat, clean and quiet, like frosted acrylic.

That density makes Milk the pick when legibility matters more than spectacle: preferences screens, dialogs, menus with many items, search and navigation over colourful illustrations or Bauhaus-style graphics. It works in light and dark themes. Like every glass it belongs on the functional layer, so wrap controls rather than articles, and avoid placing a second glass panel inside it.

Milk also degrades gracefully. When reduced transparency is requested, the tint rises from 72% to 92% and refraction switches off, a change users barely notice; in solid quality or without backdrop-filter support it becomes an opaque white surface with a border. Try it in the preferences screen template, then export HTML/CSS with the runtime, Tailwind, a SwiftUI wrapper or JSON for an agent.

Best for

• Preferences screens and dialogs
• Menus with long lists of items
• Navigation over colourful illustrations
• Glass with maximum label legibility

Parameters

Where to use it

Best on: light backgrounds, dark backgrounds.
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: 'milk'
});

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