Glow Radio Selection

A glow radio selection built with pure HTML and CSS that highlights the active option with a soft glowing effect. It enhances selection visibility and modern interaction feedback within form controls.

Usage

Use this component when interfaces require visually emphasized radio selection, such as feature selectors, preference options, pricing toggles, or interactive settings panels.

Implementation

The effect is implemented using CSS :checked selectors combined with glow style box shadow or background effects, allowing the selected radio option to emit a subtle highlight when activated.

HTML

<label class="ss-radio glow">
  <input type="radio" name="g">
  <span></span>
  Select
</label>

<label class="ss-radio glow">
  <input type="radio" name="g">
  <span></span>
  Select
</label>

CSS

.ss-radio.glow{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}

.ss-radio.glow input{
  position:absolute;
  opacity:0;
}

.ss-radio.glow span{
  width:16px;
  height:16px;
  border:2px solid #2563eb;
  border-radius:50%;
  position:relative;
  display:inline-block;
}

.ss-radio.glow span::after{
  content:'';
  position:absolute;
  inset:3px;
  background:#2563eb;
  border-radius:50%;
  opacity:0;
  transition:opacity .2s ease;
}

.ss-radio.glow input:checked + span{
  box-shadow:
    0 0 0 4px rgba(37,99,235,.25),
    0 0 12px rgba(37,99,235,.8);
}

.ss-radio.glow input:checked + span::after{
  opacity:1;
}

.ss-radio.glow{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}

.ss-radio.glow input{
  position:absolute;
  opacity:0;
}

.ss-radio.glow span{
  width:16px;
  height:16px;
  border:2px solid #2563eb;
  border-radius:50%;
  position:relative;
  display:inline-block;
}

.ss-radio.glow span::after{
  content:'';
  position:absolute;
  inset:3px;
  background:#2563eb;
  border-radius:50%;
  opacity:0;
  transition:opacity .2s ease;
}

.ss-radio.glow input:checked + span{
  box-shadow:
    0 0 0 4px rgba(37,99,235,.25),
    0 0 12px rgba(37,99,235,.8);
}

.ss-radio.glow input:checked + span::after{
  opacity:1;
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses glow style selection styling
• Enhances radio state visibility
• Fully responsive across breakpoints
• Suitable for forms and option selectors
• Easy to customize glow color and intensity

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.