Hello everyone! Today, let’s have some coding fun by creating a Glassmorphism login form with various themes using HTML, CSS, and JavaScript.
In this tutorial, we’ll explore the cool world of Glassmorphism and use JavaScript to add different themes to our login form. Whether you’re an experienced coder or just starting out, this is a great chance to improve your skills and give your projects a modern touch.
Wondering why Glassmorphism? It’s all about that sleek, glass-like design that’s popular nowadays. So, let’s keep it simple and dive into HTML for structure, CSS for style, and JavaScript for dynamic theming.
Join me in this coding adventure as we craft a stylish Glassmorphism login form. Using HTML, CSS, and JavaScript, we’ll create something not just functional but visually appealing. Ready to add a bit of modern flair to your projects? Let’s start our Glassmorphism Login Form journey – the easy and enjoyable way!
HTML :
The given HTML code represents a login page with a glassmorphism design. It includes a container section with a login form. The form contains input fields for username and password, a submit button, and links for registration and password recovery. The page also includes two circle elements for decorative purposes and a theme button container.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Glassmorphism Login - Different Theme</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<body>
<section class="container">
<div class="login-container">
<div class="circle circle-one"></div>
<div class="form-container">
<img src="https://codingstella.com/wp-content/uploads/2024/01/download-8.png" alt="illustration" class="illustration" />
<h1 class="opacity">LOGIN</h1>
<form>
<input type="text" placeholder="USERNAME" />
<input type="password" placeholder="PASSWORD" />
<button class="opacity">SUBMIT</button>
</form>
<div class="register-forget opacity">
<a href="">REGISTER</a>
<a href="">FORGOT PASSWORD</a>
</div>
</div>
<div class="circle circle-two"></div>
</div>
<div class="theme-btn-container"></div>
</section>
</body>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
CSS :
The given code is a CSS code snippet that defines the styling for a login form. It sets various properties such as background color, font styles, box shadows, and transitions to create a visually appealing and interactive login interface. The code also includes animations for input focus and button hover effects. The use of CSS variables allows for easy customization of colors and other styles.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
: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: -19%;
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;
}
.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);
}
}JavaScript:
The given JavaScript code defines an array of theme objects, each containing properties for background color, text color, and primary color. The setTheme function is used to update the CSS variables in the :root selector with the values from the selected theme. The displayThemeButtons function dynamically creates theme buttons based on the themes array and attaches click event listeners to each button to change the theme when clicked.
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();And there you have it! You’ve successfully created a Glassmorphism login form with various themes using HTML, CSS, and JavaScript. Great job on combining sleek design with functionality. Keep coding and exploring – your projects are bound to be as successful as this one. Happy coding!
Facing challenges in your project? No problem! The source code is available for you. Simply hit Download and begin your coding journey. May your coding be filled with joy!
