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


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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.