Ask AI Glowing Input
A real text input with a slowly turning gradient border and a soft halo behind it, while placeholder ideas roll past and step aside the moment you type. Conic border, blurred copy, :placeholder-shown.
Also known as: ask ai input css, ai search bar animation, gradient border input, glowing input css.
HTML
<label class="aia-ask-ai-input">
<span class="aia-ask-ai-input-glow" aria-hidden="true"></span>
<span class="aia-ask-ai-input-frame" aria-hidden="true"></span>
<svg class="aia-ask-ai-input-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C12.6 7.6 16.4 11.4 22 12C16.4 12.6 12.6 16.4 12 22C11.4 16.4 7.6 12.6 2 12C7.6 11.4 11.4 7.6 12 2Z"/></svg>
<span class="aia-ask-ai-input-box">
<input class="aia-ask-ai-input-field" type="text" placeholder=" " aria-label="Ask AI">
<span class="aia-ask-ai-input-hints" aria-hidden="true"><span>Ask AI anything</span><span>Summarize this thread</span><span>Draft a reply to Sam</span><span>Ask AI anything</span></span>
</span>
<kbd class="aia-ask-ai-input-kbd">⌘K</kbd>
</label>CSS
@property --aia-ask-ai-input-a {
syntax: "<angle>";
inherits: true;
initial-value: 0deg;
}
.aia-ask-ai-input {
--c: var(--aia-color, #7c5cff);
font-size: var(--aia-size, 16px);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.4;
--ring: conic-gradient(from var(--aia-ask-ai-input-a), var(--c), color-mix(in oklab, var(--c) 40%, #ff6fb5), color-mix(in oklab, var(--c) 35%, #ffb35c), color-mix(in oklab, var(--c) 40%, #3ddcff), var(--c));
position: relative;
isolation: isolate;
display: flex;
align-items: center;
gap: 0.65em;
width: 22em;
height: 3.1em;
padding: 0 0.6em 0 1em;
box-sizing: border-box;
border-radius: 0.95em;
color: #f4f4f5;
cursor: text;
animation: aia-ask-ai-input-spin 5s linear infinite;
}
.aia-ask-ai-input-glow,
.aia-ask-ai-input-frame {
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
}
.aia-ask-ai-input-glow {
background: var(--ring);
filter: blur(0.9em);
opacity: 0.45;
transition: opacity 0.3s ease;
}
.aia-ask-ai-input-frame {
border: 0.1em solid transparent;
background: linear-gradient(#111116, #111116) padding-box, var(--ring) border-box;
}
.aia-ask-ai-input:focus-within .aia-ask-ai-input-glow { opacity: 0.85; }
.aia-ask-ai-input-icon {
flex: none;
width: 1.15em;
fill: color-mix(in srgb, var(--c) 45%, #fff);
animation: aia-ask-ai-input-twinkle 2.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aia-ask-ai-input-box {
flex: 1;
display: grid;
align-items: center;
min-width: 0;
}
.aia-ask-ai-input-field,
.aia-ask-ai-input-hints { grid-area: 1 / 1; }
.aia-ask-ai-input-field {
width: 100%;
padding: 0;
border: 0;
font: inherit;
font-size: 0.95em;
color: inherit;
background: transparent;
outline: none;
}
.aia-ask-ai-input-hints {
height: 1.4em;
overflow: hidden;
font-size: 0.95em;
color: rgba(255, 255, 255, 0.45);
pointer-events: none;
transition: opacity 0.15s ease;
}
.aia-ask-ai-input-hints span {
display: block;
height: 1.4em;
line-height: 1.4em;
animation: aia-ask-ai-input-roll 7.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-ask-ai-input-field:not(:placeholder-shown) + .aia-ask-ai-input-hints { opacity: 0; }
.aia-ask-ai-input-kbd {
flex: none;
padding: 0.2em 0.45em;
border-radius: 0.4em;
font: inherit;
font-size: 0.75em;
color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.08);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
@keyframes aia-ask-ai-input-spin {
to { --aia-ask-ai-input-a: 360deg; }
}
@keyframes aia-ask-ai-input-twinkle {
0%, 100% { scale: 1; rotate: 0deg; }
50% { scale: 0.82; rotate: 45deg; }
}
@keyframes aia-ask-ai-input-roll {
0%, 28% { translate: 0 0; }
33%, 61% { translate: 0 -1.4em; }
66%, 94% { translate: 0 -2.8em; }
100% { translate: 0 -4.2em; }
}
@media (prefers-reduced-motion: reduce) {
.aia-ask-ai-input,
.aia-ask-ai-input-icon,
.aia-ask-ai-input-hints span { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.aia-ask-ai-input, .aia-ask-ai-input *, .aia-ask-ai-input::before, .aia-ask-ai-input::after, .aia-ask-ai-input *::before, .aia-ask-ai-input *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--aia-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--aia-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.