Glow Input
The active field wraps itself in a double indigo glow — a crisp 4 px ring and a soft 20 px haze — that fades as soon as you move on.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Forms has 20 effects, including 2 free. Explore the category →
3 usage examples
How it works
At rest, .glw-input has a thin 1 px frame in rgba(99, 102, 241, .3), 10 px corners and a barely indigo fill. Nothing reaches outside its box.
The .glw-input:focus rule adds two comma-separated shadows in box-shadow: 0 0 0 4px rgba(99, 102, 241, .2), a solid unblurred ring that follows the rounded corners, then 0 0 20px rgba(99, 102, 241, .3), a blurred haze spreading around. The frame turns solid #6366f1 at the same time. A single 0.3 s transition on all properties brings the whole thing up and down.
A shadow takes no room in the layout: the glow overflows by about 20 px without pushing neighbouring elements, but a tight parent with overflow: hidden will clip it. The .glw-caption label above the field is its visible name. The .fx-0293-root root is only a demo background.
Accessibility
- Label: "Your name" sits in the
<label>containing the field; the old example text ("Click to see the glow…") is gone in favour of a real name. - Form:
name="name"andautocomplete="name", for submission and autofill. - Focus visibility: on a dark background the glow shows well; on white, a ring at 20% opacity and a haze at 30% turn pale. Raise those opacities (0.35 and 0.45, for example) if your page is light.
- Reduced motion: with
prefers-reduced-motion: reduce, the glow appears and disappears without a fade. - Several fields: only the focused field glows, which helps keyboard users follow their progress through a long list of questions.
Browser compatibility
Multiple box-shadow layers, a transition and one width variable: Chrome 49, Firefox 31, Safari 9.1. Checked in Chromium, Firefox and WebKit with two copies of the field (only the clicked second one glows), by keyboard, touch, at 390 px and with reduced motion. In the captures, the Ctrl+K shortcut, the typing and the move to the next question are simulated by each scene's script; that script is not sold with the effect.
Without a transition, the glow switches on and off at once. In forced-colours mode (Windows), shadows are removed: add outline: 2px solid transparent on focus so a system outline stays visible.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0293-root">
<label class="glw-field">
<span class="glw-caption">Your name</span>
<input class="glw-input" type="text" name="name" autocomplete="name">
</label>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Crisp ring (CSS — first shadow of the :focus rule) |
0 0 0 4px rgba(99, 102, 241, .2) |
The 4th number is the thickness. At 2 px the ring becomes a hairline; at 6 px, leave room between fields. |
| Soft haze (CSS — second shadow) | 0 0 20px rgba(99, 102, 241, .3) |
The 3rd number is the blur. The bigger it is, the further the glow spills; make sure no parent clips it with overflow: hidden. |
| Colour (CSS) | indigo 99, 102, 241 |
Appears four times: resting frame, focused frame, ring and haze. Replace all four with the same hue. |
Width (CSS — --glw-width) |
280 px | 100% to fit a card or a search bar; capped by max-width: 100%. |
Duration (CSS — transition of .glw-input) |
0.3 s | Plays when lighting up and fading out. A shorter value (0.15 s) suits a fast quiz better. |
Visible label (HTML — .glw-caption) |
"Your name" above | Remove it for a search bar and give the field an aria-label instead. |
FAQ
overflow: hidden (or auto) and hugs the field. Give it at least 20 px of padding around the field, or drop the hidden overflow.box-shadow is painted on top, outside the size calculation: neighbouring fields stay put when the glow appears..glw-input.is-error { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .2), 0 0 20px rgba(239, 68, 68, .3); }, added by your validation and linked to the message with aria-describedby.
