Glowing Search Bar
Overview
A rotating conic gradient shows only a 1.5px border, with a stronger glow on focus and a ⌘K shortcut.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Glowing Search Bar to your project in your colors.
Where to use it
Search boxes, AI chat inputs, form fields, file uploads, verification codes and anywhere else people type.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add glowing-search-bar
mcp › Use 8pt MCP to call get_component("glowing-search-bar")
Code
Source for Glowing Search Bar. Motion uses only transform and opacity and respects the Reduce motion setting.
<label class="x-gs">
<span class="x-gs__glow" aria-hidden="true"><i></i></span>
<span class="x-gs__field">
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"/><path d="M20 20l-3.5-3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<input type="search" placeholder="Search components, templates, Skill">
<kbd>⌘K</kbd>
</span>
</label>.x-gs{position:relative;display:block;width:min(420px,100%);border-radius:16px;padding:1.5px;overflow:hidden;isolation:isolate}
.x-gs__glow{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;opacity:.55;transition:opacity .3s}
.x-gs__glow i{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;background:conic-gradient(#4D74FF,#00c2ff,#ff4fd8,#c7ff5e,#4D74FF);transform:translate(-50%,-50%) rotate(0);animation:x-gs 4s linear infinite}
.x-gs:focus-within .x-gs__glow{opacity:1}
.x-gs::after{content:"";position:absolute;inset:-30px;z-index:-2;background:radial-gradient(60% 80% at 50% 50%,color-mix(in srgb,var(--d-accent,#4D74FF) 40%,transparent),transparent 70%);opacity:0;transition:opacity .4s}
.x-gs:focus-within::after{opacity:1}
.x-gs__field{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border-radius:15px;background:var(--d-card,#0d0d14);color:var(--d-muted,#a0a0ab)}
.x-gs__field svg{width:18px;height:18px;flex:none}
.x-gs input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--d-fg,#fff);font:15px/1 var(--d-font,system-ui,sans-serif)}
.x-gs input::placeholder{color:var(--d-muted,#8a8a95)}
.x-gs kbd{padding:4px 7px;border-radius:6px;border:1px solid var(--d-line,rgba(255,255,255,.14));font:600 11px/1 ui-monospace,monospace}
@keyframes x-gs{to{transform:translate(-50%,-50%) rotate(1turn)}}const init = (root) => {
const input = root.querySelector('input');
const onKey = e => { if (e.key === 'k' && (e.metaKey || e.ctrlKey) && root.closest('[data-own-k]')) { e.preventDefault(); input.focus(); } };
document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
};Subscribe to Builder to see the full source.See pricing