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>

That's because you are seeing a solid background image (with the gradients) and the boxes are low opacity white backgrounds. — Joe Conlin, Sep 05 '17 at 23:09
What picture? The example link is to a google search which presents lots of boxes, possibly different in different parts of the world. — traktor, Sep 05 '17 at 23:22
@Traktor53 sorry about the image, if you wait a second it will load the image. This is the URL to the image: https://i.pinimg.com/736x/d4/24/50/d4245021322d952524a5035756b10f1f.jpg. I also changed the link in the question as well. — mddev, Sep 05 '17 at 23:25
You should use rgba with a being the value of `alpha` a.k.a. opacity. If you use opacity your text will also be semi transparent therefor yielding unpleasant results. — Paul Ghiran, Sep 05 '17 at 23:28
Are you looking for the gradient to duplicated the background image OR the background in the boxes? — Joe Conlin, Sep 05 '17 at 23:34
Please post your actual HTML and other relevant CSS. I've inserted some stub HTML for you, however the results will be nothing like the example effect you're after in the screenshot. — Dai, Sep 05 '17 at 23:35
Nothing in the screenshot you posted looks like it depends on `blur` at all - just low-opacity white backgrounds and subtle border effects. — Dai, Sep 05 '17 at 23:37
You are overthinking this by a TON. Just set your box background color to something like `background-color: rgba(255,255,255, .1)` and adjust the alpha channel. No need for all the excess CSS. — Joe Conlin, Sep 05 '17 at 23:40
@mddev you have some mistake attributes inside your css `div.glass-bg-color::before`. 1) `z-index: -1` you are placing the entire content behind the layer of your html. 2) `opacity: 0.3` you are already applying opacity to the back with 30% alpha transparency, however 3) `background-color: rgba(255,255,255, 1)` you have manage to put back the white bg to solid because of `1` in the last rgba rule. — iMarkDesigns, Sep 06 '17 at 19:42

Joe Conlin · Answer 1 · 2017-09-06T19:23:58.117

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/

traktor · Accepted Answer · 2017-09-06T01:01:52.573

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.

score 1 · Answer 3 · answered Sep 06 '17 at 00:03

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;
}

transparent UI box in CSS

3 Answers3