Frosted Glass Effect Demo

The frosted glass effect that you see to the right is created using a combination of CSS properties, the most prominent being backdrop-filter: blur(10px); or -webkit-backdrop-filter: blur(10px); which applies a blur to the background of the element.

The background of the element consists of a pair of fills assigned to its background-image stylesheet property. The first is a circular radial-gradient which is largely transparent except for a patch of 'bloom' near the top. The second uses a linear-gradient with near the extremes of the top and bottom of the container. This second background is allowed to show by using box-sizing: border-box to clip the container's main content to the inner edge of the border.

Finally, fairly hefty values are applied to the style's box-shadow property to give a very diffuse shadow around the element.

The header is positioned absolutely, 20px from the bottom-right of the container and uses a font called "Parisienne" linked to Google's font repository found here, whilst the body text uses Veranda or the closest available sans-serif font.

The <code> elements inside the element use a very similar set of styling to the main container, although the effect values are greatly reduced to suit the nature of the content.