The glow input is the polished form treatment where each field's border lights up with a soft radial glow that follows your cursor as it moves across the control — the spotlight-border effect popularized by developer-tool sign-in screens. This snippet implements it for inputs and a button using plain HTML, CSS, and a tiny vanilla JavaScript handler, with the glow drawn purely as a border via a mask trick.

Tracking the cursor with custom properties

The position of the glow is stored in two CSS custom properties, --x and --y, on each field. A single shared pointermove handler reads the cursor's position relative to the hovered element with getBoundingClientRect and writes those pixel values into the variables. CSS does the rest — the glow's radial gradient is centered at var(--x) var(--y), so updating the variables moves the light. Passing the position through CSS variables instead of restyling the gradient in JS keeps the handler trivially cheap.

Glow on the border only, via mask-composite

The clever part is confining the glow to the 1px border rather than filling the whole field. Each control's ::before is inset to cover the element, painted with the radial gradient, and given padding: 1px. Two masks are then composited with mask-composite: exclude (and the -webkit-mask-composite: xor equivalent): one mask covers the content box, the other the full box, and excluding one from the other leaves only the 1px padding ring visible. The result is a gradient that shows only as a glowing border outline — the standard CSS technique for gradient borders without an extra wrapper element.

Reveal on hover and focus

The glow's ::before sits at opacity: 0 and transitions to 1 on :hover, on :focus-within for the fields, and on :hover for the button. So the border lights up when you point at or tab into a field and fades out when you leave — giving keyboard users the same clear focus affordance as mouse users, which matters because the glow doubles as the focus indicator here.

Clean, borderless inputs

The actual <input> elements are transparent with no border or outline of their own; the visual frame comes entirely from the field shell and its glow. An icon sits inline before each input, and the placeholder uses a muted color. This keeps the markup simple — a <label> wrapping an icon and an input — while the glow lives on the label shell so the whole field reacts as one.

The submit flow

The button shares the exact same glow treatment via the data-glow attribute, so the spotlight follows the cursor across it too. On submit, JavaScript prevents navigation and swaps the button label to a "Signing in…" then "Welcome ✓" state — a minimal stand-in for a real auth call you'd drop a fetch into.

Customizing it

Change the gradient color to your accent, widen the 180px circle radius for a larger pool of light, increase the padding for a thicker glowing border, or adjust the reveal transition. Add the data-glow attribute to any element to give it the same effect — it's fully generic. Pair it with a glassmorphism login panel or an animated gradient CTA for a cohesive sign-in screen.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Rather than puzzling out the mask math by hand, paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain step by step how the double mask combined with mask-composite: exclude (and its -webkit-mask-composite: xor equivalent) leaves only the 1px padding ring of the gradient visible instead of filling the whole field, and why storing the cursor position in the --x and --y custom properties keeps the pointermove handler so cheap. It's also worth asking it to optimize the interaction, for instance whether attaching one listener per data-glow element scales fine for a form with many fields or should be delegated to a single parent listener. For extending it, ask it to add a colored glow per field type, make the radius react to scroll speed, or wire the fake submit delay to a real fetch call with error states. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a set of form inputs and a submit button with a cursor-tracking radial glow confined to their borders, in plain HTML, CSS, and JavaScript, using CSS custom properties and a mask-composite trick — no canvas, no libraries.

Requirements:
- Any element that should glow gets a data-glow attribute and a single shared pointermove listener (attached per matching element) that reads the cursor's position relative to that element via getBoundingClientRect and writes the result in pixels into two CSS custom properties on that element, for example --x and --y.
- Each glowing element's ::before pseudo-element must be absolutely positioned to cover the element, painted with a radial-gradient centered at var(--x) var(--y) (falling back to an off-screen default when the properties are unset), and given a small padding value (around 1px).
- That ::before must use two composited masks, one covering only the content box and one covering the full border box, combined with mask-composite: exclude and the -webkit-mask-composite: xor fallback, so that only the thin padding ring shows the gradient — the glow must render strictly as a border outline, never filling the element's interior.
- The glow layer must be invisible at rest (opacity 0) and fade in on both :hover and, for form fields, :focus-within, so keyboard-only users tabbing through the form get the same border light as mouse users and it effectively serves as the focus indicator.
- Inputs themselves must have no visible border or outline of their own — the frame comes entirely from the glow shell wrapping each input.
- On form submit, prevent the default navigation and change the submit button's label through at least two states (a brief "in progress" label, then a success label) using a timeout in place of a real request.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA sign-in form renders with dark, borderless fields.
2
Move over a fieldA soft radial glow lights its border and follows the cursor.
3
Tab into a fieldThe glow appears on focus too, acting as the focus ring.
4
Hover the buttonThe same spotlight border tracks across the submit button.
5
Submit the formThe button shows Signing in, then a Welcome confirmation.
6
Reuse the effectAdd data-glow to any element to light its border.

Real-world uses

Common Use Cases

Sign-in screens

Pair with a glassmorphism login panel.

Waitlist forms

Light up fields in an animated gradient CTA.

Search bars

Apply the glow to a search box.

Settings panels

Highlight inputs in a settings panel.

Contact forms

Upgrade a plain contact form.

Gradient border demos

A reference for the mask-composite border trick.

Got questions?

Frequently Asked Questions

Each field stores the pointer position in two CSS custom properties, --x and --y. A shared pointermove handler reads the cursor's position relative to the element with getBoundingClientRect and writes those pixel values into the variables. The glow's radial gradient is centered at var(--x) var(--y), so CSS moves the light automatically — the JS only updates two numbers.

Each control's ::before is painted with the radial gradient and given padding: 1px, then masked with mask-composite: exclude (xor on WebKit): one mask covers the content box, another the full box, and excluding one from the other leaves only the 1px padding ring visible. That confines the gradient to a border outline without any extra wrapper element.

Yes. The glow's reveal is tied to :focus-within on the fields as well as :hover, so tabbing into a field lights its border. The native input outline is removed, so the glow intentionally serves as the focus indicator, giving keyboard users the same clear affordance as mouse users.

Yes — it's generic. Any element with the data-glow attribute gets the pointermove listener, and any element carrying the ::before glow CSS will show the border light. The demo uses it on both the input shells and the submit button, but you can apply it to cards, search bars, or buttons the same way.

Render the fields and attach a pointermove handler that sets the --x and --y inline style values via a ref, or use event delegation on the form. Keep the mask-composite CSS as-is. Handle submit with a framework event that calls your auth API and toggles the button label. In Tailwind, express the gradient and masks with arbitrary values and drive the variables through an inline style.

Loading…