Smoke: smoky grey glass for busy backdrops

About the material

Smoke dissolves the backdrop more than any sibling. Its backdrop-filter blur melts detail into soft patches of color, while the mid-grey tint stays light and barely dims the image. Refraction is the weakest in the group, but the edge zone is the widest, so the lens doesn't draw a sharp bend: it spreads out gradually. Visible grain and a broad inner glow give the surface the texture of real smoked glass.

Reach for it on dark or media backdrops full of small detail: city lights, collages, video frames. The heavy blur flattens the noise behind each control, so button labels and search text read more calmly than on clearer materials. Unlike Onyx or Space Black, Smoke never sinks into black and keeps an airy feel. It's still not a surface for long articles, and nested glass should become an ordinary surface.

Heavy blur costs rendering time, so use reduced quality on screens with many glass surfaces. With Reduce Transparency the preset lowers the blur, drops the lens and makes the fill nearly solid; Increase Contrast strengthens the rim. In the studio you can test Smoke against 24 backdrops, then export HTML/CSS, Tailwind, SwiftUI or JSON. The preview backdrop never ships in the code.

Best for

• Panels over busy photography
• Search and menus over noisy video
• Overlays on night and city scenes
• Soft dialogs in dark mode

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

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