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,
- 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,
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
thanks for staying to read to the end. for more tutorials follow my page let me know what you think in the comments
Top comments (1)
thanks man