A minimal login form built with pure HTML and CSS that focuses on simplicity with essential input fields and clean spacing. It enhances usability and distraction-free authentication flow in modern UI layouts.
Usage
Use this component when interfaces require clean and lightweight authentication design, such as landing pages, SaaS dashboards, portfolio sites, or minimal web applications.
Implementation
The layout is implemented using a simple form structure with aligned input fields and clear spacing, styled using CSS for typography, alignment, and responsive behavior across screen sizes.
HTML
<div class="fx-login">
<form class="fx-card" id="form">
<h2>Login</h2>
<p class="subtitle">Secure access portal</p>
<div class="fx-field" id="emailBox">
<input type="text" id="email" required>
<label>Email</label>
<span class="border"></span>
<small></small>
</div>
<div class="fx-field" id="passwordBox">
<input type="password" id="password" required>
<label>Password</label>
<span class="toggle" onclick="togglePassword()">⦿</span>
<span class="border"></span>
<small></small>
</div>
<button class="fx-btn">Continue</button>
</form>
</div>
<script>
const email = document.getElementById("email");
const password = document.getElementById("password");
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
email.addEventListener("input", () => {
validate(email, emailRegex, "Invalid email");
});
password.addEventListener("input", () => {
validate(password, /.{6,}/, "Min 6 characters");
});
function validate(input, regex, message) {
const box = input.parentElement;
const error = box.querySelector("small");
if (regex.test(input.value)) {
box.classList.add("success");
box.classList.remove("error");
error.innerText = "";
} else {
box.classList.add("error");
box.classList.remove("success");
error.innerText = message;
}
}
function togglePassword() {
password.type = password.type === "password" ? "text" : "password";
}
</script>CSS
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
.fx-login {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #0a0614;
}
.fx-card {
width: 340px;
padding: 35px;
border-radius: 16px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(168,85,247,0.15);
backdrop-filter: blur(12px);
box-shadow:
0 10px 40px rgba(0,0,0,0.7),
0 0 20px rgba(168,85,247,0.15);
color: #e9d5ff;
}
.subtitle {
font-size: 13px;
color: #c4b5fd;
margin-bottom: 25px;
}
.fx-field {
position: relative;
margin-bottom: 25px;
}
.fx-field input {
width: 100%;
padding: 14px 0;
background: transparent;
border: none;
outline: none;
color: #f5f3ff;
font-size: 14px;
}
.fx-field label {
position: absolute;
left: 0;
top: 14px;
color: #a78bfa;
transition: 0.25s;
}
.fx-field input:focus + label,
.fx-field input:valid + label {
top: -10px;
font-size: 11px;
color: #c084fc;
}
.border {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: rgba(168,85,247,0.2);
transition: 0.3s;
}
.fx-field input:focus ~ .border {
height: 2px;
background: #c084fc;
box-shadow: 0 0 10px #c084fc;
}
.fx-field.error .border {
background: #fb7185;
}
.fx-field.success .border {
background: #4ade80;
}
small {
font-size: 11px;
color: #fb7185;
margin-top: 6px;
display: block;
}
.toggle {
position: absolute;
right: 0;
top: 12px;
cursor: pointer;
color: #c084fc;
}
.fx-btn {
width: 100%;
padding: 14px;
border-radius: 10px;
border: 1px solid rgba(192,132,252,0.4);
background: transparent;
color: #c084fc;
cursor: pointer;
transition: 0.3s;
}
.fx-btn:hover {
background: #c084fc;
color: #140a2e;
box-shadow: 0 0 25px #c084fc;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Focuses on minimal UI structure
- Enhances clean authentication experience
- Fully responsive across breakpoints
- Suitable for modern web applications
- Easy to customize spacing and typography
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.