Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question

1 Answer 1

up vote 5 down vote accepted

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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