HTML , CSS Tutorial | How to make login form with gradient color
In this post, you will get knowledge about how to make a login form with a gradient color. We usually make a form with gradient color to make it look more attractive.
The HTML
In HTML code we write the basic code for the form.
<html>
<head>
<title>MAIN</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="robo">ROBOTICSHUB</div>
<div class="d1">
<form id="form_id" method="post" name="myform">
<input type="text" name="username" class="user" placeholder="Username" id="username" required>
<input type="password" class="pass" name="password" placeholder="Password" id="password" required>
<input type="button" class="btn" value="Login" id="submit"/>
</form>
</div>
<div class="new"><br>
Don't have account?
<a href="">Sign up</a>
</div>
</body>
</html>
The CSS
In CSS code we give texture and layout of the login form. So in CSS code, we give gradient color to our form to look more attractive.
body{
background-image:white;
}
.d1{
position:absolute;
text-align:center;
font-family:arial;
font-weight:bold;
color:black;
background-image:linear-gradient(blue,cyan);
top:50%;
left:50%;
height:250px;
width:250px;
border-radius:20px;
transform:translate(-50%,-50%);
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
.new{
position:absolute;
top:78%;
left:50%;
background-image:linear-gradient(blue,cyan);
text-align:center;
height:70px;
width:250px;
transform:translate(-50%,-50%);
border-radius:20px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
.user{
position:absolute;
background: #fafafa;
color:grey;
top:20%;
left:50%;
transform:translate(-50%,-50%);
padding: 12px;
border:1px, solid;
}
.pass{
position:absolute;
background: #fafafa;
color:grey;
top:45%;
left:50%;
transform:translate(-50%,-50%);
padding: 12px;
border:1px, solid;
}
.btn{
position:absolute;
background-color:#3897f0;
top:80%;
left:50%;
color:white;
font-weight:bold;
transform:translate(-50%,-50%);
padding: 12px;
background-image:linear-gradient(orange,red,white);
width:200px;
border: 0px solid #ddd;
}
.robo{
position:absolute;
text-align:center;
background: -webkit-linear-gradient(#FFFFFF, #5F5F5F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
top:10%;
left:33%;
font-weight:bold;
font-size:400%;
background-image:linear-gradient(#FFFFFF,#5F5F5F);
}
Happy Coding .
#html #css
10.10 GEEK