Home » iOS8 Blur effect with CSS for the web using BlurJS – Blurred Translucent Overlay

iOS8 Blur effect with CSS for the web using BlurJS – Blurred Translucent Overlay

Hey everyone,

One of the trending things right now is to create a blurred translucent overlay. In this tutorial I’m going to explain how to make an iOS7 blur effect with CSS.  This is often seen in iOS7 designs (like the picture below):

iOS7 heavily crafts its experience around the concept of transparency

Luckily, for you jQuery users, blurJS will be a special treat for you. What it does is uses a Gaussian blur algorithm to blur content that is under the blurjs targeted element. There by creating an overlay that looks very close to the one pictured above.

Have fun!

UPDATE: For Photoshop users the overlay is more of hack than a “blurred, translucent over”. Basically take the image that is below your overlay and convert it to a smart object. Then go to Filters>Blur>Gaussian Blur and adjust to liking. Then right click on image layer, Blend Options>Color Overlay. Select the color you want (in the case of the iOS7 screen, white) and drop the opacity to your liking. Hope that helps.

One comment on “iOS8 Blur effect with CSS for the web using BlurJS – Blurred Translucent Overlay

  1. masajes alicante on

    Muy chula esta entrada, aprovecho para felicitaros por esta página,
    que os he encontrado por internet y me parecen todos los
    contenidos muy interesantes.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *