Glass Input
Translucent text input with a subtle inner glow on focus — useful when a form sits over imagery or a video background.
The code
<div class="gm-input-bg">
<label class="gm-input">
<span class="gm-input__lbl">Email</span>
<input class="gm-input__field" type="email" placeholder="[email protected]" />
</label>
</div> <div class="gm-input-bg">
<label class="gm-input">
<span class="gm-input__lbl">Email</span>
<input class="gm-input__field" type="email" placeholder="[email protected]" />
</label>
</div>.gm-input-bg {
position: relative; padding: 32px;
border-radius: 18px; overflow: hidden;
background:
radial-gradient(ellipse at 30% 30%, #a855f7 0%, transparent 55%),
radial-gradient(ellipse at 70% 70%, #6366f1 0%, transparent 55%),
#1a0a2e;
}
.gm-input { display: block; }
.gm-input__lbl {
display: block;
font: 600 11px system-ui, sans-serif;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0.06em; text-transform: uppercase;
margin-bottom: 8px;
}
.gm-input__field {
width: 100%; box-sizing: border-box;
background: rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 10px;
padding: 11px 14px;
color: #fff;
font: 13px system-ui, sans-serif;
transition: border-color 0.25s, box-shadow 0.25s;
}
.gm-input__field::placeholder { color: rgba(255, 255, 255, 0.55); }
.gm-input__field:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.55);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18),
0 0 24px rgba(168, 85, 247, 0.25);
} .gm-input-bg {
position: relative; padding: 32px;
border-radius: 18px; overflow: hidden;
background:
radial-gradient(ellipse at 30% 30%, #a855f7 0%, transparent 55%),
radial-gradient(ellipse at 70% 70%, #6366f1 0%, transparent 55%),
#1a0a2e;
}
.gm-input { display: block; }
.gm-input__lbl {
display: block;
font: 600 11px system-ui, sans-serif;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0.06em; text-transform: uppercase;
margin-bottom: 8px;
}
.gm-input__field {
width: 100%; box-sizing: border-box;
background: rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 10px;
padding: 11px 14px;
color: #fff;
font: 13px system-ui, sans-serif;
transition: border-color 0.25s, box-shadow 0.25s;
}
.gm-input__field::placeholder { color: rgba(255, 255, 255, 0.55); }
.gm-input__field:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.55);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18),
0 0 24px rgba(168, 85, 247, 0.25);
}