News

4 CSS steps to creating a blurred glass effect

The blurred glass look is everywhere, but has remained illusive and hard to achieve on the web

BlurredGlass

The blurred glass look is everywhere, but has remained illusive and hard to achieve on the web

BlurredGlass

Follow the four steps below to get the blurred effect without any need for Photoshop

01. Pick the image

The image choice for implementing the blurred glass effect successfully is a crucial step. The effect can be used in lots of ways, so talking things through with the designer on their intentions is worthwhile. The part of the image that will be blurred will benefit from having good contrast and detail.

02. Blurring the image

Blurring the image requires making a duplicate. One image will be sharp and the other will have the blur treatment. To blur the image, simply add ‘-webkit-filter: blur(10px);’ to it. The blurred image needs to sit on top of the sharp one, so use absolute positions and z-index.

03. Clipping the image

The next step is the mask the blurred image, so only part of it is visible. This is where browser support is an issue as this technique only works in Chrome currently (but support for other browsers will come soon). Use clip-path and polygon() together to mask off an area.

04. Scaling

Due to the way the blur filter works, it’s likely that the sharp image will be showing through at the edges. To fix this, scale up the blurred image slightly and use overflow:hidden to hide the excess. This should crop the blurred effect flush and complete the look.


GET THE LATEST ISSUE OF WEB DESIGNER NOW


×