Glass UI prompts

Build the backdrop first

Decide what the glass sits over: a photograph, soft blobs of colour that drift, a shaft of light, the content of the app itself. Describe it with colours and sizes and say how slowly it moves. The backdrop gives the glass something to show, and it sets the mood more than the panel does.

Keep contrast in the backdrop moderate. Very bright and very dark areas side by side make text on the glass hard to read, whatever the blur.

Describe the pane in layers

Frosted glass in CSS is a stack. A backdrop blur, often 16 to 30px, with a little extra saturation. A tint, such as white at 10 to 20 percent on a dark scene. A 1px rim that is brighter at the top than at the bottom, which is what makes an edge read as glass. A soft shadow below to lift the pane. Give a number for each.

Liquid and fluted glass go further: they shift or repeat what is behind them. That usually needs an SVG displacement filter or a small shader. Say which you want, and ask for plain frosted glass as the fallback where the effect is not supported. Check the current browser support for the technique before you depend on it.

Protect the text

Text on glass sits over a moving picture, so it needs help: a slightly stronger tint behind text blocks, a heavier weight than you would use on a solid surface, and no thin grey captions. Ask the tool to check contrast at the lightest and darkest points of the backdrop.

Use glass for a few panes. A card, a bar, a menu. When every surface is glass, nothing is behind anything, and the effect is lost along with the frame rate.

What a glass UI prompt should contain

• The backdrop: what is behind the glass, its colours and how it moves.
• The kind of glass: frosted, liquid or fluted, and how it is built.
• The layers: blur, saturation, tint, rim and shadow, each with a number.
• Legibility: text weight, tint behind text, a contrast check.
• The fallback for browsers without the effect, and for reduced transparency.
• The limit: how many panes are glass, and what stays solid.

A prompt to start from

Build one frosted-glass card for [product] showing [content, e.g. today's sleep summary], over a slowly moving backdrop. A design study on a single page.

Stack: Vite + React + TypeScript, plain CSS with custom properties. No libraries, no WebGL.

Backdrop: full viewport, base #0c0f1a. Three blurred colour fields drift behind the card: #3b5bff at 520px, #ff7a45 at 420px and #19c2a0 at 360px, each a circle with filter: blur(90px) at 70% opacity. They move on slow independent loops of 18s, 23s and 29s, travelling no more than 120px, so the colour under the card keeps changing.

Card: 380 × 460px, centred, radius 32px.
- backdrop-filter: blur(26px) saturate(150%), with the -webkit- prefix as well.
- Tint: rgba(255,255,255,0.10).
- Rim: a 1px inner border drawn as a gradient, rgba(255,255,255,0.55) at the top to rgba(255,255,255,0.08) at the bottom.
- A highlight: a 1px line of rgba(255,255,255,0.7) across the top edge, inset 24px from each side.
- Shadow: 0 30px 60px -20px rgba(0,0,0,0.55).

Content, padding 28px, text #ffffff: a 13px/600 uppercase label "[label]"; a 64px/600 value "[value]" with tabular figures and a 20px unit; a row of seven bars 10px wide for the week, today's bar solid white and the rest at 35% white; two lines of 15px/500 detail. Behind the two lines, a second tint of rgba(0,0,0,0.18) with a 16px radius so they stay readable.

Interaction: the card tilts up to 4 degrees toward the pointer and the top highlight shifts 12px with it, eased over 0.3s. On touch devices, no tilt.

Fallback: where backdrop-filter is unsupported, use a solid rgba(28,32,48,0.92) fill. With prefers-reduced-motion, the colour fields stop and the tilt is off. With prefers-reduced-transparency, use the solid fill.

Phones: the card is the viewport width minus 32px, the same height.

Run it and check that all text passes 4.5:1 contrast when each colour field is behind it, at 390px and 1440px.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• How to describe a visual style to an AI toolThe vocabulary a model acts on when building UI (materials, light, density, edges) and the adjectives it ignores, with a style block to copy.
• One look across many screensHow to keep several AI-built screens in one design system: write the tokens once, give them to every prompt, and take the look from a family of pieces, not one.

• Dashboards
• Widgets
• Phone screens
• AI product UI
• Buttons and controls
• Menus and navigation
• Motion