: 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?

@Pierce403

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.



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

Vote Up Vote Down