Animated Gradient Border Tooltip
A dark tooltip framed by a conic gradient that keeps spinning while it is open, with a soft glow of the same colors behind it. The angle is an @property, so the gradient itself rotates.
Also known as: glowing tooltip css, rainbow border tooltip, ai tooltip gradient.
Polish this paragraph with AI
HTML
<span class="tip-gradient-border"> <button type="button" aria-describedby="tip-gradient-border-tip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20 14.5 9.5"/><path d="m12.5 7.5 4 4"/><path d="M18 3v3.5M16.25 4.75h3.5M20.5 10v2.5M19.25 11.25h2.5M9 3.5v2M8 4.5h2"/></svg>Rewrite</button> <span class="tip-gradient-border-tip" id="tip-gradient-border-tip" role="tooltip">Polish this paragraph with AI</span> </span>
CSS
@property --tip-gradient-border-a {
syntax: "<angle>";
inherits: true;
initial-value: 0deg;
}
.tip-gradient-border {
--c: var(--tip-color, #3b82f6);
font-size: var(--tip-size, 16px);
position: relative;
display: inline-flex;
}
.tip-gradient-border button {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.6em 1.2em;
border: 0;
border-radius: 0.5em;
background: var(--c);
color: #fff;
font: 600 1em system-ui, sans-serif;
cursor: pointer;
}
.tip-gradient-border svg {
width: 1.2em;
height: 1.2em;
}
.tip-gradient-border button:focus-visible {
outline: 2px solid var(--c);
outline-offset: 2px;
}
.tip-gradient-border-tip {
/* declared here, where the angle animates, so the ring picks up every frame */
--ring: conic-gradient(from var(--tip-gradient-border-a), var(--c), #ec4899, #f59e0b, color-mix(in srgb, var(--c) 40%, #22d3ee), var(--c));
position: absolute;
bottom: calc(100% + 0.8em);
left: 50%;
z-index: 10;
padding: 0.65em 1.05em;
color: #fff;
font: 500 0.85em/1.3 system-ui, sans-serif;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform-origin: 50% 100%;
transform: translate(-50%, 0.3em) scale(0.9);
transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), visibility 0.35s;
}
/* both layers sit behind the text: first the blurred glow, then the fill with its ring */
.tip-gradient-border-tip::before,
.tip-gradient-border-tip::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: 0.6em;
}
.tip-gradient-border-tip::before {
background: var(--ring);
filter: blur(0.6em);
opacity: 0.55;
}
.tip-gradient-border-tip::after {
border: 0.15em solid transparent;
background: linear-gradient(color-mix(in srgb, var(--c) 14%, #0f172a), color-mix(in srgb, var(--c) 14%, #0f172a)) padding-box, var(--ring) border-box;
}
.tip-gradient-border:hover .tip-gradient-border-tip,
.tip-gradient-border:focus-within .tip-gradient-border-tip {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0) scale(1);
animation: tip-gradient-border-spin 3s linear infinite;
}
@keyframes tip-gradient-border-spin {
to { --tip-gradient-border-a: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.tip-gradient-border, .tip-gradient-border *, .tip-gradient-border::before, .tip-gradient-border::after, .tip-gradient-border *::before, .tip-gradient-border *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--tip-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--tip-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.