transparent UI box in CSS

Question

I'm trying to make a transparent glass-like box, something similar to what is shown in this image:

I don't know whats wrong with my CSS because it looks like a white box (with low opacity) shown, basically it doesn't have the look or feel as shown in the picture. I was wondering if anyone knows how to achieve something like this?

My CSS (I tried a couple of things like blur or opacity but neither one yields the result I want):

.body-bg-color{

   background: #00467F;
   background: -webkit-linear-gradient(to right, #A5CC82, #00467F);  
   background: linear-gradient(to right, #A5CC82, #00467F); 
}
    
div.glass-bg-color::before {
    z-index: -1;
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    //    filter: blur(4px);
    //    box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
    opacity: 0.3;
    background-color: rgba(255,255,255, 1);
}
    
.glass-bg-color {
    color: white;
    position: relative;
}

<div class="body-bg-color">

    <div class="glass-bg-color">
    Foo
    </div>
    
    <div class="glass-bg-color">
    Bar
    </div>
    
    <div class="glass-bg-color">
    Baz
    </div>

</div>

Answer 1

The answer is really just applying white with a low opacity on the box backgrounds:

The CSS:

body {
    position: relative;
    width: 100%;
    background: #00467F;
    background: -webkit-linear-gradient(left, #A5CC82, #00467F);
    background: -moz-linear-gradient(left, #A5CC82, #00467F);
    background: -o-linear-gradient(left, #A5CC82, #00467F);
    background: linear-gradient(to right, #A5CC82, #00467F);   
}


.glass-bg-color {
    position: relative;
    display: inline-block;
    float: left;
    margin: 20px;
    width: 200px;
    height: 200px;
    border-radius: 4px;
    text-align: center;
    background-color: rgba(255,255,255,.08);
    color: white;
}

The HTML: `

<div class="glass-bg-color">
Foo
</div>

<div class="glass-bg-color">
Bar
</div>

<div class="glass-bg-color">
Baz
</div>

`

See the fiddle here: https://jsfiddle.net/4y8bx2eg/

Answer 2

The example you've shown uses a radial gradient as the background of the underlying element, and transparent white for the "glass" effect. For example I've created an elliptical background gradient ( by modifying an example on MDN) placed as a transparent image on top of a solid background of the body.

The glass effect is now just a transparent white background on a container element. I've used an inline-block for demonstration:

body {
  margin: 0px;
  width: 100vw;
  height;: 100vh;
  background-color: #00467F;
  background-image:
     radial-gradient(ellipse farthest-corner at 80vw 15vh ,
      rgba( 250, 240, 128, 0.5) 5%, rgba( 250,240,128,0) 95%
  );
  background-attachment:fixed;
}
.glass {
   background-color: rgba( 255,255, 255, 0.1); /* transparent white */
   color:white;
   display:inline-block;
   border-radius: 15px;
   padding: 10px;
}

<div class="glass"
  style="margin-left:50vw; margin-top: 20vh; width: 80px; height: 180px;">
 Hello Folks!
</div> 

(Note the CSS for the body background can produce unwanted scrollbars if the body margin is non zero. An alternative to zero width body margins may be to create a fixed position background element with a z-index of -1. Previous discussion of the issue may be found at CSS3 gradient background set on body doesn't stretch but instead repeats? which I have already found useful.

Answer 3

Your current background opacity is set to 1. It should be closer to 0.2. And your spread-radius of the box-shadow is 3000px, which should be set more relative to the size of your elements, I'd also suggest changing the blur-radius a bit, which is currently zero.

Is this more like what you are looking for?

.body-bg-color{
  background: #00467F;
  background: -webkit-linear-gradient(to right, #A5CC82, #00467F);  
  background: linear-gradient(to right, #A5CC82, #00467F); 
  text-align: center;
}

.glass-bg-color {
  box-shadow: inset 0 0 50px 10px rgba(255,255,255,0.2);
  background-color: rgba(255,255,255, 0.2);
  color: white;
  position: relative;
  display: inline-block;
  padding: 10em;
}