Chat Input Border Beam
A chat composer with two colored beams circling its edge and a glow leaking out behind them, brighter while the field has focus. One conic layer on an @property angle, masked to the rim and blurred.
Also known as: border beam input, ai chat input animation css, prompt box glowing border, animated textarea border.
HTML
<label class="bdr-chat-input-border-beam">
<span class="bdr-chat-input-border-beam-beam" aria-hidden="true"></span>
<textarea class="bdr-chat-input-border-beam-field" rows="2" aria-label="Message" placeholder="Ask Claude to refactor auth.ts"></textarea>
<span class="bdr-chat-input-border-beam-bar" aria-hidden="true">
<span class="bdr-chat-input-border-beam-chip">auth.ts</span>
<span class="bdr-chat-input-border-beam-send"><svg viewBox="0 0 24 24"><path d="M12 19V5m0 0l-6 6m6-6l6 6"/></svg></span>
</span>
</label>CSS
@property --bdr-chat-input-border-beam-a {
syntax: "<angle>";
inherits: true;
initial-value: 0deg;
}
.bdr-chat-input-border-beam {
--c: var(--bdr-color, #3b82f6);
font-size: var(--bdr-size, 16px);
--hot: color-mix(in oklch, var(--c), #d946ef 75%);
--arcs: conic-gradient(from var(--bdr-chat-input-border-beam-a), transparent 0 6%, color-mix(in srgb, var(--c) 80%, transparent) 20%, color-mix(in srgb, var(--c) 30%, #fff) 28%, transparent 29% 56%, color-mix(in srgb, var(--hot) 80%, transparent) 70%, color-mix(in srgb, var(--hot) 30%, #fff) 78%, transparent 79%);
position: relative;
isolation: isolate;
display: grid;
gap: 0.4em;
width: 18em;
box-sizing: border-box;
padding: 0.8em 0.6em 0.6em 0.95em;
border-radius: 1.1em;
color: #f1f5f9;
font-family: system-ui, sans-serif;
cursor: text;
animation: bdr-chat-input-border-beam-turn 5s linear infinite;
}
.bdr-chat-input-border-beam::before,
.bdr-chat-input-border-beam::after,
.bdr-chat-input-border-beam-beam {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
transition: opacity 0.4s ease;
}
.bdr-chat-input-border-beam::before {
z-index: -1;
inset: 0.1em;
background: var(--arcs);
filter: blur(0.8em);
opacity: 0.7;
}
.bdr-chat-input-border-beam::after {
z-index: -1;
background: color-mix(in srgb, var(--c) 6%, #0d1017);
}
.bdr-chat-input-border-beam-beam {
padding: 1.5px;
background: var(--arcs), color-mix(in srgb, #fff 10%, transparent);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
opacity: 0.85;
}
.bdr-chat-input-border-beam:focus-within::before { opacity: 0.9; }
.bdr-chat-input-border-beam:focus-within .bdr-chat-input-border-beam-beam { opacity: 1; }
.bdr-chat-input-border-beam-field {
min-height: 2.6em;
margin: 0;
padding: 0;
border: 0;
outline: 0;
resize: none;
background: none;
color: inherit;
caret-color: var(--c);
font: 450 0.85em/1.5 system-ui, sans-serif;
}
.bdr-chat-input-border-beam-field::placeholder { color: color-mix(in srgb, #f1f5f9 45%, transparent); }
.bdr-chat-input-border-beam-bar {
display: flex;
align-items: center;
justify-content: space-between;
}
.bdr-chat-input-border-beam-chip {
padding: 0.3em 0.55em;
border-radius: 0.45em;
background: color-mix(in srgb, #fff 7%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 9%, transparent);
color: color-mix(in srgb, #f1f5f9 75%, transparent);
font: 500 0.66em/1 ui-monospace, Menlo, monospace;
}
.bdr-chat-input-border-beam-send {
display: grid;
place-items: center;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
background: var(--c);
box-shadow: 0 0.2em 0.6em -0.1em var(--c);
}
.bdr-chat-input-border-beam-send svg {
width: 1em;
height: 1em;
fill: none;
stroke: #fff;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
@keyframes bdr-chat-input-border-beam-turn {
to { --bdr-chat-input-border-beam-a: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.bdr-chat-input-border-beam { animation: none; --bdr-chat-input-border-beam-a: 30deg; }
}
@media (prefers-reduced-motion: reduce) {
.bdr-chat-input-border-beam, .bdr-chat-input-border-beam *, .bdr-chat-input-border-beam::before, .bdr-chat-input-border-beam::after, .bdr-chat-input-border-beam *::before, .bdr-chat-input-border-beam *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bdr-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--bdr-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.