Silver: a clean light glass surface

About the material

Where Titanium leans toward metal, Silver leans toward daylight. A pale cool-grey tint (#c9cdd4) at 30% opacity, 34 px of blur and a brightness boost give a surface that looks freshly polished rather than tinted. Saturation stays low at 112%, refraction is gentle, and the white rim sits at 70% opacity, visible without drawing the eye. It is the light group's most restrained take on classic glassmorphism.

Silver suits product UIs that want glass without a mood: dashboards, settings, editors and admin tools in light or dark themes. Use it on the functional layer (tabs, toolbars, search fields, switches, dialogs) and leave reading areas on plain surfaces. The ui-kit screen template shows all 12 components in one material, which is the quickest way to judge Silver against your brand colours before you commit.

The studio renders three quality levels. Full adds SVG edge refraction where the browser visibly supports it; reduced keeps blur, tint and rim and is the default; solid swaps backdrop filtering for an opaque surface and border. Silver loses little when it falls back, since its look comes mostly from tint and brightness. Export HTML/CSS with the runtime, Tailwind, a SwiftUI wrapper or JSON, or run generateCode with the ui-kit template and the silver preset.

Best for

• Dashboards and editors in a light theme
• Restrained glassmorphism for product UI
• Tabs, search fields and switches
• Interfaces that need a graceful fallback

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

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