How create this glass effect in Photoshop


I came across the this image. I want to make a glass effect like the below image using CSS or Photoshop. Can someone say how it is done?

enter image description here

3/28/2014 3:33:00 PM

Accepted Answer

This to me just looks like some white shapes placed over a blurred background with their opacity reduced at varying levels. The "main" rounded rectangle has a white stroke and hardened drop shadow to give it the illusion of thickness.

Photoshop Screenshot

I've created a similar effect in Photoshop, but the same concept could be applied using CSS. Something like the following should do it:

div {
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 2px 2px 0px 2px rgba(255, 255, 255, 0.3);

JSFiddle demo

3/28/2014 3:15:00 PM