Focus Glow Trail
A glowing ring that appears around inputs on focus, combining border color change with a soft box-shadow halo. Enhances visual accessibility and provides clear feedback on active form fields.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
focusglowinputringaccessibility
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A glowing ring that appears around inputs on focus for enhanced visual accessibility.
CSS
css
.input { width: 260px; padding: 12px 16px; font-size: 16px; border: 2px solid #3f3f46; border-radius: 8px; background: #18181b; color: #fff; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.input:focus { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6, 0 0 16px #3b82f666; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<input type="text" class="input" placeholder="Focus me" />Full Source
html
<!DOCTYPE html>
<html><head><style>
.input { width: 260px; padding: 12px 16px; font-size: 16px; border: 2px solid #3f3f46; border-radius: 8px; background: #18181b; color: #fff; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.input:focus { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6, 0 0 16px #3b82f666; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style></head><body><input type="text" class="input" placeholder="Focus me" /></body></html>