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


1 Answer 1


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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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