Skip to content
Browse the guide
Craft

Material craft

Glass, directional edges, masks and falloff.

Glass needs a real backdrop relationship. Keep foreground text clear and test translucent fill against actual content. An all-white background may show little blur; a busy one can compromise reading.

Treat rim, inner material light and exterior shadow separately. A faint dark contour can delimit bright glass, with broad low-alpha shadow describing distance. Inner white light belongs where it explains material, not on every solid panel.

Directional edge contrast can use a hollow mask and gradient while preserving interior pixels. Verify corners, paint bounds and coherent light direction across themes.

For a fade meeting a flat plane, inspect endpoint rate of change. An eased alpha distribution may join more quietly than a linear ramp. Hold endpoints, span and total contribution controlled; extra stops are not a universal banding cure.

CSS support alone does not prove visible backdrop rasterization. Compare against no blur or an independent patterned-background probe. Record an unobserved effect as a setup limitation rather than generalizing to all browser versions.

These examples do not simulate physical refraction. Extended glass sampling remains outside the accepted article scope; do not add it to an existing interface just because a recipe could support it.