₹0.00

No products in the cart.

₹0.00

No products in the cart.

HomeHTMLGlassmorphism login form in HTML CSS and JavaScript- login form design

Glassmorphism login form in HTML CSS and JavaScript- login form design

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest news

Median UI v1.7 + (AMP) Premium Blogger Template Download

Hello and welcome to TechnoStone. In this post, I will be introducing you to the Median UI v1.7 Blogger Template. Median UI v1.7 is a...

Plus UI V2.6.1 Blogger Template with Safelink Free Download

Hey there! In this post, I want to tell you about a really cool blogger template called Plus UI. It's a premium design that's...

Litespot v2.0 – [Premium] Blogger Template Free Download

LiteSpot v2.0 Blogger Template: The Ultimate Theme for News Sites and Magazines LiteSpot v2.0 Blogger Template, which is a professional and SEO-friendly theme for creating...

FROM SHOP