Frosted Glass from Games to the Web - tyleo.com

During my time as a UI developer for Forza Horizon 3 and Forza Motorsport 7, I had the opportunity to work with stunning frosted acrylic design elements. Here's an example from Horizon 3:

Inspired by this design, I've always wanted to create a similar effect using HTML. On this page, I share my attempt at achieving a beautiful glass effect, along with sample code and assets for anyone who wants to explore this technique themselves. Here's a look at the final product:

Before diving into the core of this tutorial, some readers may prefer to skip straight to the final recipe so they can paste it right into their own page. Those readers can find it conveniently tucked away in this toggle.

The key to a good frosted glass effect is using a Gaussian blur to obscure the background, mimicing the look of a translucent screen. Most browsers and game engines efficiently approximate Gaussian blurs by using box blurs.

In CSS, Gaussian blurs can be applied by using backdrop-filter with the blur function. On iOS -webpkit-backdrop-filter is required unless you go deep into the settings where no man has ventured before (Settings -> Safari -> Advanced -> Feature Flags -> 'CSS Unprefixed Backdrop Filter'). Box blur is only recently supported by browsers. So Internet Explorer users can't experience these demos.

Leave a Comment