A device trust login form built with pure HTML and CSS that allows users to confirm login from a recognized or trusted device. It enhances security awareness and authentication clarity within modern login workflows.
Usage
Use this component when interfaces require trusted device confirmation, such as secure account logins, verification screens, multi device authentication flows, or account protection interfaces.
Implementation
The layout is implemented using structured input grouping with device confirmation options, styled with CSS for spacing, focus states, and clear visual hierarchy. Responsive rules ensure usability across screen sizes.
HTML
<div class="stylo-trust">
<div class="bg-grid"></div>
<div class="card">
<div class="device">
<h3>MacBook Pro</h3>
<p class="location">Los Angeles, California</p>
<span class="trusted">Trusted Device</span>
</div>
<form>
<div class="field">
<input type="checkbox" id="toggle">
<input type="password" required placeholder=" ">
<label>Password</label>
<label for="toggle" class="toggle">Show</label>
</div>
<button class="btn">Unlock</button>
</form>
</div>
</div>CSS
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
.stylo-trust {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #020617;
position: relative;
overflow: hidden;
}
.bg-grid {
position: absolute;
width: 200%;
height: 200%;
background:
linear-gradient(rgba(56,189,248,0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(56,189,248,0.1) 1px, transparent 1px);
background-size: 40px 40px;
animation: moveGrid 20s linear infinite;
}
@keyframes moveGrid {
0% { transform: translate(0,0); }
100% { transform: translate(-40px,-40px); }
}
.card {
width: 340px;
padding: 30px;
border-radius: 18px;
background: rgba(255,255,255,0.03);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 10px 40px rgba(0,0,0,0.6);
color: #e5e7eb;
text-align: center;
position: relative;
z-index: 2;
}
.device {
margin-bottom: 25px;
}
.icon {
font-size: 30px;
margin-bottom: 10px;
}
.location {
font-size: 12px;
color: #94a3b8;
}
.trusted {
display: inline-block;
margin-top: 8px;
font-size: 11px;
padding: 4px 10px;
border-radius: 20px;
background: rgba(34,197,94,0.15);
color: #22c55e;
}
.field {
position: relative;
margin-bottom: 25px;
}
.field input[type="checkbox"] {
display: none;
}
.field input[type="password"],
.field input[type="text"] {
width: 100%;
padding: 14px 0;
border: none;
outline: none;
background: transparent;
color: #fff;
font-size: 14px;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.field label:first-of-type {
position: absolute;
left: 0;
top: 14px;
color: #64748b;
transition: 0.25s;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
top: -10px;
font-size: 11px;
color: #38bdf8;
}
.toggle {
position: absolute;
right: 0;
top: 12px;
font-size: 12px;
color: #38bdf8;
cursor: pointer;
}
.field input[type="checkbox"]:checked ~ input {
-webkit-text-security: none;
}
.field input:focus {
border-bottom: 2px solid #38bdf8;
box-shadow: 0 4px 12px rgba(56,189,248,0.3);
}
.btn {
width: 100%;
padding: 14px;
border-radius: 10px;
border: none;
background: #38bdf8;
color: #000;
cursor: pointer;
transition: 0.3s;
}
.btn:hover {
box-shadow: 0 0 25px #38bdf8;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Designed for trusted device confirmation flows
- Enhances authentication security visibility
- Fully responsive across breakpoints
- Suitable for secure login interfaces
- Easy to customize device confirmation styling
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.