Glass Input
Two translucent 240 px input fields — e-mail and message — set over two blurred orbs: a 6% white fill, a 16 px backdrop blur, and on focus a purple border, a fill that brightens to 8% and a 3 px ring, in 0.3 s, without a single line of JavaScript.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Glassmorphism has 47 effects, including 6 free. Explore the category →
3 usage examples
How it works
It is all CSS. Each field (.glass-input-field, on an input as on a textarea) is a pane of glass: rgba(255,255,255,.06) fill, backdrop-filter: blur(16px) (plus its -webkit- form for Safari), a 10% white border, 10 px corners, padding: 10px 14px, 12.8 px white text (.8rem). Measured in a blank page: 240 × 37 px for the single-line field in Chromium 151 (35 px in Firefox 153, which computes line height differently), 240 × 60 px for the message area (min-height: 60px, resize: none). Above each field, a 10.9 px label in 50% white. Behind them, the 300 × 220 px scene places two already blurred orbs (filter: blur(50px)): a 140 px violet #7c3aed one top right and a 100 px cyan #0891b2 one bottom left, both at 40% opacity — they are what the glass softens.
Focus does all the visible work. .glass-input-field:focus changes three things at once, with transition: .3s: the border turns purple rgba(139,92,246,.5), the fill rises from 6 to 8% white, and two shadows appear — a solid 3 px ring in 15% purple and a 16 px glow below. Measured with the keyboard in Chromium, Firefox and WebKit: Tab focuses the e-mail field, ring and border are in place 0.45 s later, the next Tab moves to the message area. The native outline is removed (outline: 0): the ring replaces it.
Three details of the HTML and CSS matter more than they seem. The message area opens and closes on the same line, <textarea …></textarea>: the slightest indentation between the tags would become its value (six spaces measured in value during a test), and the hint text “Votre message...” would never show; here :placeholder-shown is true for both fields. The labels carry for, and the fields the ids glass-input-email and glass-input-message: clicking “Message” puts the caret in the area, and a screen reader announces the label. Finally the blur is also written as -webkit-backdrop-filter, the only form Safari reads before version 18.
Accessibility
- Focus ring too faint: the shipped ring (15% purple) reads 1.14:1 against the
#0a0a0fbackground and the purple border 1.92:1 against the field — below the 3:1 expected of a focus indicator (WCAG 1.4.11). Since the native outline is removed, strengthen the ring:box-shadow: 0 0 0 3px rgba(167,139,250,.6)gives 3.24:1, and argba(167,139,250,.85)border 4.34:1 against the brightened field — that is the setting used by the three scenes on this page. - Hint text: the placeholder in 30% white measures 2.71:1 against the field (4.5:1 threshold). It does not replace a label — both labels are present and attached — but if the hint carries useful information (“E.g. a stain on the ceiling…”), raise it to 55% white. The 50% label measures 5.33:1 on
#0a0a0f; on a light photo, check it or give it a drop shadow. - Labels and ids:
label for+idtie each label to its field (measured:label.controlreturns the field). If you paste two forms in the same page, rename the second form's ids, otherwise its labels will send the caret into the first form's fields. Addautocomplete="email"on the e-mail field andrequiredwhere input is mandatory. - Motion: the only animation is the 0.3 s focus transition; nothing moves on its own, the orbs are static. No
prefers-reduced-motionsetting is needed. - Reduced transparency: nothing is provided for
prefers-reduced-transparency. On a very busy photo, users who turn it on would benefit from a solid fill:@media (prefers-reduced-transparency: reduce) { .glass-input-field { background: #1f2430; backdrop-filter: none } }.
Browser compatibility
CSS only: backdrop-filter, ::placeholder, :focus, box-shadow, filter: blur() on the orbs. Zero JavaScript, zero dependencies. Measured in Chromium 151, Firefox 153 and WebKit 26.5: same computed value (blur(16px)), same focus ring, no error; the painted blur was only seen in Chromium, as automated Firefox and WebKit screenshots do not paint backdrop-filter. The only visible difference is the single-line height: 37 px in Chromium, 35 px in Firefox. Safari needs the -webkit-backdrop-filter prefix up to version 17: it is in the sold CSS.
Without backdrop-filter (Firefox before 103, Chrome before 76), the field stays readable: a 6% white fill with no blur, while border, text and focus ring remain — the orbs simply show sharp behind it. On a high-contrast background, add a more opaque fallback fill inside @supports not (backdrop-filter: blur(1px)).
The code
HTML structure to paste into your page (the CSS + JS come with Premium):
<div class="demo-preview">
<div class="glass-input-scene">
<div class="glass-input-orb glass-input-orb--1"></div>
<div class="glass-input-orb glass-input-orb--2"></div>
<div class="glass-input-group">
<label class="glass-input-label" for="glass-input-email">…</label>
<input type="email" id="glass-input-email" class="glass-input-field" placeholder="…">
</div>
<div class="glass-input-group">
<label class="glass-input-label" for="glass-input-message">…</label>
<textarea id="glass-input-message" class="glass-input-field glass-input-field--textarea" placeholder="…"></textarea>
</div>
</div>
</div>The full HTML + CSS + JS of Glass Input, ready to paste — plus all 840 effects. Or $299 once, lifetime access.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Glass opacity (CSS — .glass-input-field { background: rgba(255,255,255,.06) }) |
6% at rest, 8% on focus | On a light or busy photo, go up to 10-14% so typed text keeps its contrast; on a plain dark background, 4% is enough. Keep the gap between rest and focus: it is what makes the field “light up”. |
Blur strength (CSS — backdrop-filter: blur(16px) and -webkit-backdrop-filter) |
16 px | 8 px lets the shapes behind show through (the slates remain recognizable), 24 px melts them into colors. Change both properties together, otherwise older Safari keeps the old value. |
Focus ring and glow (CSS — .glass-input-field:focus { box-shadow: … }) |
3 px ring in 15% purple + 0 4px 16px glow at 10%, purple border at 50% | For a focus that reads on a photo: box-shadow: 0 0 0 3px rgba(167,139,250,.6), 0 4px 16px rgba(139,92,246,.25) and border-color: rgba(167,139,250,.85) (3.24:1 and 4.34:1 measured). For another brand color, change the three purple values together. |
Hint text (CSS — .glass-input-field::placeholder { color: rgba(255,255,255,.3) }) |
30% white (2.71:1) | Raise to 55% if the hint carries information. A message area's hint only shows if nothing is written between <textarea> and </textarea>, not even a line break: keep both tags together. |
Field size (CSS — .glass-input-group { width: 240px }, .glass-input-field--textarea { min-height: 60px }) |
240 px wide, 60 px message area | Fields take 100% of their group: change the group's width (or width: 100% in a fluid form). For a taller message area, raise min-height; resize: none stops users from enlarging it — remove it if messages are long. |
Background orbs (CSS — .glass-input-orb--1, --2) |
140 px violet and 100 px cyan, blurred by 50 px, 40% opacity | They only give the glass something to blur in the demo. On your page, delete them and set the fields over your own picture: that is what will make the effect. The 300 × 220 px scene (.glass-input-scene) can go with them. |
FAQ
<textarea> and </textarea> becomes its value, spaces and line breaks included: six spaces of indentation are enough to give a non-empty value, and :placeholder-shown stays false forever (measured). In the sold code, both tags sit together. If your editor or formatter re-indents the HTML, check that it does not slip whitespace between them.
