Crystal: thin crystal glass with a bright facet

About the material

Crystal is the jewel of the optical group. Blur is only 10 px and the white tint 8%, so the backdrop reads clearly, but the rim is 2 px wide at 85% opacity, the brightest edge among the optical materials, and the specular highlight matches Lens. Refraction of 64 with a wide edge zone bends the backdrop near the border while the centre stays clean. Generous 32 px corners keep all that sparkle from turning sharp or aggressive.

Crystal fits dark interfaces and graphic media where controls should feel precious: hero toolbars on poster-style layouts, premium media controls, segmented controls and buttons on dark marketing pages, overlays on artwork. Its crisp edge separates controls from the backdrop better than Clear does, though over custom images or video you should still check contrast on the actual render.

Strong optics cost frame time. The studio warns when more than eight surfaces run at full quality and suggests reduced or solid for the rest, so give Crystal's full refraction to a few hero elements and let secondary ones use reduced, which keeps the blur, tint and bright rim. With increased contrast the rim goes fully opaque. Export HTML/CSS with the runtime, Tailwind, SwiftUI or JSON, or generate components from the CLI.

Best for

• Hero toolbars on poster-style layouts
• Premium media controls
• Buttons on dark marketing pages
• Accent controls with a crisp edge

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

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