How to create a Frosted Glass Effect

Frosted glass and translucent effects have become quite popular since the advent of animation in web design. These effects, when combined with animation and parallax-type features add depth to pages, giving them an almost 3D quality.  Below we highlight some of the effects that can be achieved by using a combination of colour, opacity and background filters. We’ve shown the effects by overlaying boxes styled with different degrees of opacity, colour and filter effects onto to ‘fixed-in-window’ images. They would work equally well if the boxes were animated elements gliding over other page content as the page is scrolled.

Multiple Fixed-in-Window images

In the example below, several elements were combined into a layout block, each one using the SAME image, and all being fixed in window. The layout block itself has a background image, fixed in window and with a background blur filter applied at 4x. Next, a box was added with an image fill, corner rounding and a white border applied. Again, the image was fixed in window, but this time with no background filter applied. We next added the translucent box to cover about 50% of the outline box. This box has no fill, but has a background blur filter applied at 8x.  Finally, the text ‘Frosted’ was added over the translucent box. The text has the ‘Clip to text’ effect applied, using the same image as all the other elements. Again, the image was set to be fixed in window. The white text is just a normal text box added over the top of the whole layout block. The end result has the effect of one image with different degrees of blurriness applied, whilst the word ‘Frosted’ has the appearance of being etched out of a frosted glass panel, allowing the underlying image to viewed in full sharpness.