This glow radio animation highlights the selected option with a subtle glow, perfect for dark UI designs.
HTML
<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;
}
Notes
- Glow feedback effect
- Dark UI friendly
- Minimal styling
- Easy customization
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.