ガイド 08/12 · 5分で読める · 更新 2026-08-19

Glass and frosted text: transmission, IOR and refraction

Real glass in a browser: transmission near 1, IOR ~1.5, and why frosted glass is just roughness applied to refraction. Clear glass vs frosted, and when glass beats chrome.

01Glass is three numbers

Transmission near 1 says light passes through. IOR (index of refraction) around 1.5 says how much it bends — ordinary glass is 1.5, crystal around 2.0. Roughness says whether the surface is polished or frosted. Every glass preset on the site is a position on those three numbers, with values shown on its page.

02Why glass needs a busy environment

A transparent object is visible because of what it does to what's behind and around it. Flat backgrounds make glass vanish. Environments with gradients — Dawn, Sunset, City — give refraction something to distort, which is what makes the letterforms readable.

03Frosted = rough transmission

Frosted glass is not a different material; it is glass with roughness raised so transmitted light scatters. Raising roughness on any transmission setup — including the site's Crystal Glass preset — trades crisp refraction for that 'quiet premium' smear that hides detail behind the letters.

04When to pick glass over chrome

Glass communicates transparency, literal or corporate. It photographs lighter than any metal, sits beautifully on brand-color backgrounds, and does not fight busy layouts — where chrome demands to be the loudest thing in frame.