Clear: transparent liquid glass over media

About the material

Clear is built to show what lies beneath it. Blur drops to 6 px, the white tint to just 5%, and edge refraction rises to 46, so the backdrop stays sharp and the glass announces itself mostly through its bending edge and a thin white rim. Saturation at 132% keeps colours lively without the punch of Regular. The effect is closer to a pane of real glass laid over a picture than to frosted plastic.

It is designed for dark interfaces and rich media: player controls over video, overlays on photo galleries, camera and editing tools, the media-studio screen template. Content under Clear stays in view, which is the whole point. The trade-off is legibility: on bright frames white labels can disappear, so Clear is not a fit for text-heavy panels or for glass nested inside glass.

The studio enforces this with a rule: when clear glass sits on a light or media background with a dim below 0.35, it warns that a dimming veil and a contrast check are needed. Set the veil to 0.35 or higher and verify the rendered contrast against your real footage. With reduced transparency the preset becomes an opaque panel. Export HTML/CSS, Tailwind, SwiftUI or JSON, or generate the media-studio template with the clear preset.

Best for

• Player controls over video
• Overlays on photo galleries
• Camera and photo editing tools
• Transparent glass for dark media screens

Parameters

Where to use it

Best on: dark backgrounds, photos and video.
Avoid: long-form content, glass nested in glass.
Needs a dimming layer: 35%.

Code

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

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

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