How to create a login page
Tags: webdev, programming, tutorial, css
Published: 2024-01-09 12:05:05


![image of the completed outpu of the login page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyhx2fbfg456tzcjnwab.png)


Hello guys today we are going to learn how to create a Glass effect on a login page using just html and css.

This exercise is aimed at improving your understanding of CSS and how to use it for visually appealing UI.

So let's begin,

1. Create a folder and name it glass-effect-login(you can name it whatever you want)
Create two files **index.html** and **style.css**.

Now in the **html** file add,
`
 
  
    <div class="container">
      <div class="login">
        <h2>Login</h2>
        <div class="input">
          <p>Name</p>
          <input type="text" placeholder="name...." />
        </div>
        <div class="input">
          <p>Password</p>
          <input type="password" placeholder="enter your password..." />
        </div>
        <button>Sign in</button>
        <p>or contiune with</p>

        <div class="icons">
          <div class="img">
            <img src="images/flat-color-icons_google.png" alt="google" />
          </div>
          <div class="img">
            <img src="images/Group.png" alt="github" />
          </div>
          <div class="img">
            <img src="images/Group (1).png" alt="Facebook" />
          </div>
        </div>
        <p>Dont have an account yet? <span>Register Here</span></p>
      </div>
    </div>
  
`
You should have something like this,
![output of HTML code without css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8mtg2fj7pac1j3ywlt9.png)

**You can find all the images on my GitHub. link is added below**

now onto the css
first we add some resets to **Style.css**

```
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

body {
  background: black
    url("images/Glass\ Effect\ Login\ Page\ -\ Original\ \(2\).png") no-repeat;
  background-size: cover;
  color: white;
}
```


now add the followinng to it

```
.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 10px;
}
.login {
  width: 30%;
  display: flex;
  padding: 30px 40px;
  flex-direction: column;
  gap: 30px;

  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.input > input,
button {
  width: 100%;
  height: 40px;
  padding: 5px 10px;
  border-radius: 10px;
  outline: none;
  border: none;
}
button {
  background-color: #bd0c47;
  height: 40px;
  padding: 10px;
  color: white;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.input > p {
  font-weight: 300;
}

.login > p {
  text-align: center;
}

.icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icons > .img {
  width: 30%;
  padding: 5px 10px;
  background: white;
  justify-content: center;
  display: inherit;
  border-radius: 10px;
  cursor: pointer;
}

```

you finally have a glass effect on a login page like this

![Image of the output of code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1movv8dxhzh1yl1uzjni.png)

thanks for staying to read to the end. for more tutorials follow my page  let me know what you think in the comments