/* =============================================================
Neon tracer border effect — reusable
-------------------------------------------------------------
A single glowing segment travels continuously around an
element's rounded border, leaving a fading comet tail.
USAGE
1. Link this file in :
2. Add the class to any element that has a border-radius:
…
CUSTOMISE (optional) via inline style or a CSS rule:
style="--trace-color: #E05B6E;" tracer + glow colour
style="--trace-thickness: 2px;" border thickness
style="--trace-speed: 4s;" one full loop duration
Notes
• The element must have position other than static — this
file sets position: relative for you.
• The tracer is drawn on a ::before overlay, so it sits on
top of (and does not replace) any existing border.
• Honours prefers-reduced-motion (tracer holds still).
• @property is needed to animate the gradient angle; where
unsupported (older Firefox) the border shows a static
segment instead of breaking.
============================================================= */
@property --neon-trace-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
.neon-trace {
--trace-color: #E05B6E;
--trace-thickness: 2px;
--trace-speed: 4s;
position: relative;
isolation: isolate;
}
.neon-trace::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: var(--trace-thickness);
background: conic-gradient(
from var(--neon-trace-angle),
transparent 0deg,
transparent 250deg,
color-mix(in srgb, var(--trace-color) 30%, transparent) 315deg,
var(--trace-color) 352deg,
transparent 360deg
);
/* Mask so only the padding ring (the border) is painted. */
-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, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
animation: neon-trace-spin var(--trace-speed) linear infinite;
}
@keyframes neon-trace-spin {
to { --neon-trace-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.neon-trace::before { animation: none; }
}