Glass

Glass that reads on any backdrop

Frosted glass with a specular ambient glow works in every browser. Refraction bends what is behind the rim in Chromium browsers.

Try the lens

A glass lens follows your pointer over the page. Turn the knobs to change its blur, glow, radius, bend, fringe and shine, and use the switch to turn refraction on or off. The markup under the tray updates to match.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio, nam libero tempore, cum soluta nobis est eligendi optio.

Blur

Glow

Radius

Bend

Fringe

Shine

Refract

Refraction shows in Chromium browsers. Elsewhere the lens is clear glass.

glass <div class="fam-glass fam-glass--refract" style="--fam-r: 90px; --fam-glow-depth: 18px; --fam-refract-blur: 3px; --fam-glass-specular: 1; --fam-refract-amount: 1; --fam-refract-dispersion: 0.1"></div>

Frosted glass

Two pieces of light glass, one rounded and one circular, each with a little blur. In Chromium browsers the rim also bends the lines behind it.

fam-glass--refract fam-glass--light

HTML

<!-- Load snippets/refraction.js once in the page, then: -->
<div class="fam-glass fam-glass--refract fam-glass--light" style="--fam-r: 24px; --fam-refract-blur: 3px; width: 220px; height: 110px"></div>
<div class="fam-glass fam-glass--refract fam-glass--light" style="--fam-r: 55px; --fam-refract-blur: 3px; width: 110px; height: 110px"></div>

Dark, light and blue glass

Dark is the default. Add fam-glass--light for light glass with dark text, or fam-glass--blue for blue glass with white text, which suits a primary or active control.

fam-glass

fam-glass fam-glass--light

fam-glass fam-glass--blue

HTML

<div class="fam-glass"><input class="fam-glass-input" placeholder="Dark" aria-label="Dark"></div>
<div class="fam-glass fam-glass--light"><input class="fam-glass-input" placeholder="Light" aria-label="Light"></div>
<div class="fam-glass fam-glass--blue"><input class="fam-glass-input" placeholder="Blue" aria-label="Blue"></div>

Specular ambient glow every browser

The glass picks up the colors next to its rim and bleeds them inward. --fam-glow-depth sets how far.

--fam-glow-depth: 0px

--fam-glow-depth: 18px

--fam-glow-depth: 40px

HTML

<div class="fam-glass" style="--fam-glow-depth: 40px"></div>

Glass on materials

The same glass field on wood, leather and felt. The frosted pane takes its color from the material behind it.

fam-wood

fam-leather

fam-felt

HTML

<div class="fam-wood" style="padding: 28px">
  <div class="fam-glass fam-glass--light"><input class="fam-glass-input" placeholder="Wood" aria-label="Glass on wood"></div>
</div>
<div class="fam-leather" style="padding: 28px">
  <div class="fam-glass fam-glass--light"><input class="fam-glass-input" placeholder="Leather" aria-label="Glass on leather"></div>
</div>
<div class="fam-felt" style="padding: 28px">
  <div class="fam-glass"><input class="fam-glass-input" placeholder="Felt" aria-label="Glass on felt"></div>
</div>

Refraction

Chromium only Clear glass bends the grid behind its rim, and the bending follows the glass's own radius. It bends a photo just as well. The fam-ui/refraction script builds that filter for each glass: load it with a script tag, or import it with a bundler. Other browsers show the same pane without the bending.

fam-glass

fam-glass--refract

fam-glass--refract on a photo

HTML

<script src="snippets/refraction.js" defer></script>
<div class="fam-glass fam-glass--refract"></div>

import 'fam-ui/refraction';

Refracting buttons and fields

Chromium only Add fam-glass--refract to a glass button or field and it becomes clear glass that bends the grid behind its rim. The clear glass has no frosting behind the label, so the label reads best over a calm backdrop.

fam-glass-button

fam-glass-input

HTML

<button class="fam-glass fam-glass--refract fam-glass-button" type="button">Share</button>
<div class="fam-glass fam-glass--refract"><input class="fam-glass-input" placeholder="Search" aria-label="Search"></div>