FORMS

Glow Focus Input

A modern dark input field with a smooth cyan glow that appears when the user clicks or focuses on the input.

HTML
<div class="glow-input-wrap">

  <label for="glow-email">
    Email Address
  </label>

  <input
    type="email"
    id="glow-email"
    placeholder="Enter your email"
  >

</div>
CSS
.glow-input-wrap{
  width:100%;
  max-width:420px;
}

.glow-input-wrap label{
  display:block;
  margin-bottom:9px;

  color:#aab4c8;
  font-size:13px;
  font-weight:600;
}

.glow-input-wrap input{
  width:100%;
  padding:15px 16px;

  border:1px solid #263750;
  border-radius:10px;
  outline:none;

  background:#0b1423;
  color:#ffffff;

  font-size:16px;

  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}

.glow-input-wrap input::placeholder{
  color:#65748b;
}

.glow-input-wrap input:focus{
  border-color:#22d3ee;

  box-shadow:
    0 0 0 3px rgba(34,211,238,.12),
    0 0 24px rgba(34,211,238,.20);
}

How This Glow Focus Input Works

The Glow Focus Input is a simple email field that uses CSS focus styling to create a cyan border and layered glow when the user activates the input. The effect is entirely CSS-based, so the published component does not require JavaScript.

The HTML uses a .glow-input-wrap container with two elements: a label and an email input. The label displays “Email Address” and uses for="glow-email", which matches the input’s id="glow-email". This creates a direct association between the label and field.

The input uses type="email" rather than a generic text type. This identifies the expected value as an email address and allows browsers to apply their built-in behavior for email fields when the input is used as part of a form. The placeholder displays “Enter your email.”

The .glow-input-wrap uses width: 100% with max-width: 420px. As a result, the field can shrink with a narrower parent container while remaining limited to 420px on wider layouts.

The label is displayed as a block and has a 9px bottom margin to separate it from the input. Its #aab4c8 color, 13px font size, and 600 font weight provide a clear field description without using the same bright white color as entered text.

The input fills the wrapper’s width and uses 15px vertical and 16px horizontal padding. Its normal state has a 1px #263750 border, 10px rounded corners, and a dark #0b1423 background. Entered text is white, while the placeholder uses the more muted #65748b color.

The main effect appears through .glow-input-wrap input:focus. When the field receives focus, its border changes from the default dark blue-gray to cyan #22d3ee. The browser’s default outline is disabled with outline: none, and a custom focus treatment is provided through two box-shadow layers.

The first shadow is 0 0 0 3px rgba(34,211,238,.12). With no horizontal or vertical offset and no blur, it creates a three-pixel translucent ring immediately outside the input. The second shadow uses 0 0 24px rgba(34,211,238,.20), producing the wider cyan glow around that ring.

Because multiple shadows can be applied to one element, the component gets both a defined focus boundary and a softer surrounding effect from the same CSS property. For more information about combining shadows, see the MDN box-shadow documentation.

The transition is limited specifically to border-color and box-shadow. Both properties animate over .25s ease, so the cyan border and glow appear gradually when focus enters the field and fade when focus leaves it.

There are no keyframe animations or JavaScript event listeners. The browser’s native :focus state is enough to activate the entire effect.

Customizing the Glow Focus Input

The component can be adapted by changing its existing field dimensions, colors, shadows, and transition values.

  • Change max-width: 420px to control the maximum width of the email field.
  • Adjust the 15px 16px input padding to make the control taller, shorter, or change its horizontal spacing.
  • Edit the 10px border radius to create sharper or more rounded corners.
  • Replace #0b1423 to use a different input background.
  • Change #22d3ee and its matching RGBA shadow values to use another focus accent color.
  • Adjust the three-pixel first shadow to change the thickness of the immediate focus ring.
  • Change the second shadow’s 24px blur value or .20 opacity to make the outer glow tighter or softer.
  • Modify the .25s ease transitions to change how quickly the focus effect appears and disappears.

Where to Use This Glow Focus Input

The focused glow can provide clear visual emphasis for fields in dark form layouts where users need an obvious indication of the currently active control.

  • Login and registration forms
  • Newsletter signup fields
  • Contact forms
  • Account settings
  • Checkout forms
  • Profile editing screens
  • Email subscription interfaces

For a complete authentication layout that uses a dark interface with multiple form controls, the Circular Gradient Login Form is a related CodeRipple component. This Glow Focus Input itself only provides an email field and focus styling; it does not submit, validate through custom code, or store the entered address.

Frequently Asked Questions

Does the Glow Focus Input use JavaScript?

No. The retrieved component contains no JavaScript. The glow is activated entirely through the CSS :focus pseudo-class.

How is the cyan glow created?

The focused input uses two box-shadow values. One creates a three-pixel translucent ring close to the field, while the second uses a 24px blur to create the wider glow.

Why does the glow appear smoothly?

The input has .25s ease transitions for border-color and box-shadow. Those transitions interpolate between the normal and focused styles.

Is this a regular text input?

It is specifically an <input type="email">. The component is intended for email-address entry, although its CSS styling could be applied to other input types separately.

The Glow Focus Input keeps the interaction focused on native CSS states, using a cyan border, two layered shadows, and short transitions to make the active email field easy to identify.

Scroll to Top