Css/html: Create a Glowing Border Around an Input Field

html

responsive-design

css

best-practices

byAlex Kataev·Jan 20, 2025

Add a glowing border effect to an input field with CSS's box-shadow property on focus. Apply this snippet to see it in action:

input:focus {
  outline: none;
  box-shadow: 0 0 8px #51CBEE;
}

The outline as none removes the default focus outline, and the box-shadow generates the glow. Customize by altering the color to #51CBEE and spread 8px.

Crafting a Glowing Border Effect

Creating a glowing border effect aids user interaction, adding an attention-grabbing visual element.

Customizing Glow

Tweak the box-shadow parameters to control glow intensity and spread. A larger blur radius leads to a more diffused glow, while a wider spread radius results in a thicker glow.

Responsive Glow

Consider utilizing media queries for an adaptive glow that's consistent across diverse screen sizes.

Cross-browser Compatibility

Ensure wide compatibility by adding browser prefixes like -webkit- or -moz- when targeting older browsers.

Applying Rounded Corners and Cohesive Style

Rounded corners and an input field that fits within your design theme can greatly enhance aesthetics.

Smoothing Edges with border-radius

Apply border-radius to give your input field soft edges:

input.glow {
  border-radius: 10px; /* Smooth like your favourite jazz melody */
}

Synchronized Styling

The glow should reflect your brand identity. Match border and box-shadow colors with your design theme.

Labelling Right

Embed your input fields within <label> tags for a semantic HTML structure, styling the label with properties like display, font, color, and padding.