WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Multicolor login form
3159
Andev.web
Open In Editor
Publish Your Code
Recommended
27 August 2024
Login
21 July 2023
Form with Video Background
2 July 2025
Login from TheDOC
HTML
Copy
Andev Web
Andev
web
Inciar
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300&family=Poppins:wght@300&display=swap'); :root { --background: #1a1a2e; --color: #ffffff; --primary-color: #0f3460; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Poppins", sans-serif; background: var(--background); color: var(--color); letter-spacing: 1px; transition: background 0.2s ease; } a { text-decoration: none; color: var(--color); } h1 { font-size: 2.5rem; } .container { display: flex; flex-direction: column; 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; } .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); } .login-container form input:focus { box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2); 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; } .login-container form button:hover { box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15); transform: scale(1.02); } .circle { width: 8rem; height: 8rem; background: var(--primary-color); 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%); } .circle-two { bottom: 0; right: 0; z-index: -1; transform: translate(45%, 45%); } .register-forget { margin: 1rem 0; display: flex; justify-content: space-between; } .opacity { opacity: 0.6; } .theme-btn-container { display: flex; justify-content: center; align-items: center; margin-top: 2rem; padding: 1rem; background: #fff; border-radius: 10px; box-shadow: 0 0 36px 1px rgba(0, 0, 0, 0.1); } .theme-btn { cursor: pointer; transition: all 0.3s ease-in; margin: 0 5px; width: 25px; height: 25px; border-radius: 50%; } .theme-btn:hover { width: 40px !important; } @keyframes wobble { 0% { transform: scale(1.025); } 25% { transform: scale(1); } 75% { transform: scale(1.025); } 100% { transform: scale(1); } }
JS
Copy
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();