Skill LibraryPrompt Skill1 DesignsTop Views

Translucent Material Readability

Design, audit, or implement glass, Liquid Glass, acrylic, mica, smoke, frosted nav, and backdrop-blur materials while protecting contrast, hierarchy, accessibility preferences, forced-colors behavior, performance, and CSS fallbacks.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines8

Reusable instruction lines for generation.

Author@Interface Lab

Implementation

Skill Directive

Description

TagsImplementation

Skill Prompt

- Use for glassmorphism, Liquid Glass, acrylic, mica, smoke, frosted glass, transparent nav/sidebar, backdrop-filter, and blurred overlays; inputs must include surface role, foreground content, backdrop variability, material intent, interaction model, accessibility targets, and target stack.
- Choose material first: long reading, dense data, forms, settings, destructive actions, and unknown backdrops prefer opaque surfaces; translucent material is for transient or contextual layers such as nav, menu, popover, HUD, search overlay, or immersive controls.
- Protect the content layer: important copy, form errors, button labels, data, and focus should not sit directly on busy images, video, or animated canvas; add local fill, tint, scrim, or fallback before blur.
- Create material tokens for material-bg, border, tint, blur, saturation, shadow, and fallback-bg, with branches for light, dark, increased contrast, reduced transparency, forced colors, and print.
- Use tint only for primary emphasis; if every glass element is tinted, the primary action disappears and visual noise rises.
- Implementation must pair `backdrop-filter` with semi-opaque background and border, use `@supports` fallbacks, and avoid accidental backdrop-root boundaries from ancestor opacity/filter/mix-blend/mask/will-change.
- Under reduced transparency, increase opacity and remove blur reliance; under reduced motion, remove elastic/refraction/parallax/scroll-linked material motion; under forced colors, restore real boundaries with Canvas, CanvasText, border, and outline.
- QA must cover light/dark, image/video/scrolling backdrops, 320px, 200% zoom, keyboard focus, long labels, reduced transparency, reduced motion, forced colors, and print.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Translucent Material Readability

More pages using Translucent Material Readability