Hello friend, how are you guys, today on this blog we are going to tell you how you can do the login form in Glassmorphism And you can make your website look good. It is straightforward because you will get all the code here to copy and paste on your website easily.
will get to see many other forms with the design and animation of the same article login form and registration form that Free Developer provides. I would not like to express my gratitude to those who provide us with such excellent codes for free, out of which hi.coders has provided you the one you see today, I have taken this form from his Instagram profile, so I would like to give credit to him that he shared this
In this form (Glassmorphism login form in HTML) you have been given a page for login only. This is the Glassmorphism design which is very popular right now. There are many other codes for graphics designing and website design for anything that you will find in Glassmorphism. In this form, you will get to see the username and password box, which you can set in your own way. And the form method which is there, you can also set it from your date.
You might like this:
Glassmorphism Login Form in HTML CSS Source Codes
By creating this Glassmorphism login Form you will need some files and some codes which will go to you. Here you will need an HTML and you will need a CSS file for styling, you will get all the codes to see below.
First, create HTML file and paste all the code below into it
const canvas = document.querySelector("#canvas");
const percent = document.querySelector(".percent");
const fullCircle = Math.PI * 2;
let completed = 0;
let val = 100;
// function promptInput() {
// val = prompt("Enter percent value.");
// val = parseInt(val);
// if (val > 100 || val < 1) {
// alert("Invalid input. Only 1 - 100 value is allowed");
// promptInput();
// }
// }
// promptInput();
let interval = setInterval(() => {
completed++;
if (completed <= val) {
createCircle((completed / 100) * fullCircle);
} else {
clearInterval(interval);
console.log("interval cleared");
}
}, 30);
function createCircle(radian) {
canvas.height = 230;
canvas.width = 230;
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(115, 115, 90, 0, Math.PI * 2, false);
ctx.strokeStyle = "#090912";
ctx.lineWidth = 30;
ctx.stroke();
ctx.beginPath();
var gradient = ctx.createLinearGradient(0, 0, 230, 230);
gradient.addColorStop(0, "#ff0000");
gradient.addColorStop(0.5, "#ff7300");
gradient.addColorStop(1, "#fff300");
ctx.arc(115, 115, 90, 0, radian, false);
ctx.strokeStyle = gradient;
ctx.lineWidth = 30;
ctx.stroke();
percent.innerHTML = completed + "%";
}Second, create a CSS file named style.css and paste the given code in your CSS file. Remember, you need to create a file with .css extension.
:root {
--background: #1a1a2e;
--color: #ffffff;
--primary-color: #0f3460;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
box-sizing: border-box;
font-family: "poppins";
background: var(--background);
color: var(--color);
letter-spacing: 1px;
transition: background 0.2s ease;
-webkit-transition: background 0.2s ease;
-moz-transition: background 0.2s ease;
-ms-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
}
a {
text-decoration: none;
color: var(--color);
}
h1 {
font-size: 2.5rem;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
position: relative;
width: 22.2rem;
}
.form-container {
border: 1px solid hsla(0, 0%, 65%, 0.158);
box-shadow: 0 0 36px 1px rgba(0, 0, 0, 0.2);
border-radius: 10px;
backdrop-filter: blur(20px);
z-index: 99;
padding: 2rem;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.login-container form input {
display: block;
padding: 14.5px;
width: 100%;
margin: 2rem 0;
color: var(--color);
outline: none;
background-color: #9191911f;
border: none;
border-radius: 5px;
font-weight: 500;
letter-spacing: 0.8px;
font-size: 15px;
backdrop-filter: blur(15px);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.login-container form input:focus {
box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2);
animation: wobble 0.3s ease-in;
-webkit-animation: wobble 0.3s ease-in;
}
.login-container form button {
background-color: var(--primary-color);
color: var(--color);
display: block;
padding: 13px;
border-radius: 5px;
outline: none;
font-size: 18px;
letter-spacing: 1.5px;
font-weight: bold;
width: 100%;
cursor: pointer;
margin-bottom: 2rem;
transition: all 0.1s ease-in-out;
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
}
.login-container form button:hover {
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15);
transform: scale(1.02);
-webkit-transform: scale(1.02);
-moz-transform: scale(1.02);
-ms-transform: scale(1.02);
-o-transform: scale(1.02);
}
.circle {
width: 8rem;
height: 8rem;
background: var(--primary-color);
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
position: absolute;
}
.illustration {
position: absolute;
top: -14%;
right: -2px;
width: 90%;
}
.circle-one {
top: 0;
left: 0;
z-index: -1;
transform: translate(-45%, -45%);
-webkit-transform: translate(-45%, -45%);
-moz-transform: translate(-45%, -45%);
-ms-transform: translate(-45%, -45%);
-o-transform: translate(-45%, -45%);
}
.circle-two {
bottom: 0;
right: 0;
z-index: -1;
transform: translate(45%, 45%);
-webkit-transform: translate(45%, 45%);
-moz-transform: translate(45%, 45%);
-ms-transform: translate(45%, 45%);
-o-transform: translate(45%, 45%);
}
.register-forget {
margin: 1rem 0;
display: flex;
justify-content: space-between;
}
.opacity {
opacity: 0.6;
}
.theme-btn-container {
position: absolute;
left: 0;
bottom: 2rem;
}
.theme-btn {
cursor: pointer;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.theme-btn:hover {
width: 40px !important;
}
@keyframes wobble {
0% {
transform: scale(1.025);
-webkit-transform: scale(1.025);
-moz-transform: scale(1.025);
-ms-transform: scale(1.025);
-o-transform: scale(1.025);
}
25% {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
}
75% {
transform: scale(1.025);
-webkit-transform: scale(1.025);
-moz-transform: scale(1.025);
-ms-transform: scale(1.025);
-o-transform: scale(1.025);
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
}
}
Now Make third file name main.js add in the same folder and copy below all code and paste main.js file
const themes = [
{
background: "#1A1A2E",
color: "#FFFFFF",
primaryColor: "#0F3460",
},
{
background: "#461220",
color: "#FFFFFF",
primaryColor: "#E94560",
},
{
background: "#192A51",
color: "#FFFFFF",
primaryColor: "#967AA1",
},
{
background: "#F7B267",
color: "#000000",
primaryColor: "#F4845F",
},
{
background: "#F25F5C",
color: "#000000",
primaryColor: "#642B36",
},
{
background: "#231F20",
color: "#FFF",
primaryColor: "#BB4430",
},
];
const setTheme = (theme) => {
const root = document.querySelector(":root");
root.style.setProperty("--background", theme.background);
root.style.setProperty("--color", theme.color);
root.style.setProperty("--primary-color", theme.primaryColor);
root.style.setProperty("--glass-color", theme.glassColor);
};
const displayThemeButtons = () => {
const btnContainer = document.querySelector(".theme-btn-container");
themes.forEach((theme) => {
const div = document.createElement("div");
div.className = "theme-btn";
div.style.cssText = `background: ${theme.background}; width: 25px; height: 25px`;
btnContainer.appendChild(div);
div.addEventListener("click", () => setTheme(theme));
});
};
displayThemeButtons();
That's all, you have now successfully created a login and registration form in HTML CSS and JavaScript. If your code does not work or you have encountered any error/problem, please download the source code files from the given download button. It's free and a .zip file will download, then you'll need to extract it.