0

I am attempting to create a login form with a glass/frosted background container. I have tried to adjust the opacity but it seems like it is hiding part of my content. How do I get this glass/blue background without hiding the content on the front ? What color do I have to give it also ? thank you

enter image description here

body{
        background:linear-gradient(
        326deg,
        rgba(235, 36, 44, 1) 12%,
        rgba(20, 92, 148, 1) 60%,
        rgba(139, 195, 235, 1) 100%
      ); ;
     }

     .container {
      align-items: center;
      align-items: stretch;
      flex-direction: column;
      background-color:lightgrey;
      opacity:40% ;
      border-radius: 40px;
      opacity: 30%;
      margin-top: 200px;
      justify-content: space-evenly;
      margin-bottom: 300px;
      align-items: center;
      width: 30px;
      padding: 100px;
  
     }

     .container div {
  

     }

     h1 {
        color: white;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        padding: 12px;
        }

     .box-1 {
       flex: 1;
       align-content: center;
       }

    input{
     border-radius: 8px;
     padding: 8px;
     width: 350px;
    }
     .box-2 {
       flex: 1;
       padding: 10px;
      }

    .box-3 {
      flex: 1;
      padding: 10px;
     }

    .box-4 {
     flex: 1;
     padding: 30px;
    }
    button {
     padding: 8px;
     width: auto;
     color: white;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
     border-radius: 50px;
     border: none;
     -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
     border-radius: 100%;
    -webkit-box-shadow: inset 0 3px 10px rgba(109, 125, 129, 0.1);
    -moz-box-shadow: inset 0 3px 10px rgba(100, 100, 100, 0.1);
     box-shadow: inset 0 3px 10px rgba(100, 100, 100, 0.1);
     background: rgba(20, 92, 148, 1);
     }
       <div>
         <div className="container">
           <div className="box-1">
             <h1>Login</h1>
        </div>
        <div className="box-2">
          <input type="search" id="search" placeholder="Email" />
        </div>
        <div className="box-3">
          <input type="search" id="search" placeholder="Password" />
        </div>
        <div className="box-4">
          <button className="bbtn">Submit</button>
        </div>
      </div>
    </div>
ATP
  • 2,939
  • 4
  • 13
  • 34
  • Are you just trying to set the background opacity without affecting the elements content? – DBS Jun 01 '21 at 13:50
  • Opacity affecting element children too. You need to set it to another one element, eg `:before`. – pavel Jun 01 '21 at 13:50
  • 1
    Looks like you want to use `background-color: rgba(211,211,211,.4)` so that opacity is applied only to the background but it's hard to tell what your problem is exactly – Ruan Mendes Jun 01 '21 at 13:54
  • I want to apply the transparent background to the container itself, not the elements. –  Jun 01 '21 at 13:56

1 Answers1

0

To get the glass effect, you must use the property backdrop-filter: blur(); and a bacground color with opacity.

Try this css:

.container {
      align-items: center;
      align-items: stretch;
      flex-direction: column;
      opacity:40% ;
      border-radius: 40px;
      opacity: 30%;
      margin-top: 200px;
      justify-content: space-evenly;
      margin-bottom: 300px;
      align-items: center;
      width: 30px;
      padding: 100px;

      /* NEW CODE */
      background-color: rgb(211 211 211 / 50%);
      backdrop-filter: blur(10px);
  }
bpardo
  • 401
  • 5
  • 11