Double Line Border
Two concentric lines around a box: on the inner one, a pink arc and a cyan arc turn in opposite directions; on the outer one, a violet arc.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Utilities has 43 effects, including 3 free. Explore the category →
3 usage examples
How it works
The .dlb-box (200 × 120 px, 12 px radius) is wrapped in two lines separated by 1 px of background. The inner line, 6 px wide, sits 3 px on each side of the edge; the outer line, 3 px wide, runs between 4 and 7 px outside. Each line is a conic-gradient layer that is almost entirely transparent and shows only one arc of colour; solid layers in the --dlb-fill colour (the box background, the 1 px gap) cover the rest, so only the arcs on the two rings remain visible.
The inner line carries two arcs of about a fifth of a turn each: a pink one (::before) going clockwise and a cyan one (::after) going the other way, one turn every 3 s. They cross twice per turn. The outer line (.dlb-outer-ring) carries a longer, softer violet arc turning backwards in 4 s.
The rotation drives the starting angle of the gradients, --dlb-a1 and --dlb-a2, declared with @property as real angles, so the browser can animate them from 0 to 360°. The effect is fully automatic: it does not react to hover, click or focus.
Accessibility
- Decoration only: the box is not interactive (no hand cursor, no keyboard stop) and its arcs have nothing to announce; the text or image inside is read normally by screen readers.
- Reduced motion: with
prefers-reduced-motion: reduce, the three arcs stop at three different places (pink at the bottom, cyan at the top, violet on the left), so both lines stay visible without moving. - Say the state in words: if the arcs signal a wait (a ringing call, a search in progress), write it too: a
role="status"on the box and a sentence such as “Looking for an opponent…” are enough. - Inside a clickable card: the effect does not change on focus. If you put a link or a button in the box, give it its own
:focus-visiblestyle.
Browser compatibility
Pure CSS, no JavaScript. Measured in Chromium 151, Firefox 153 and Playwright's WebKit 26.5: all three arcs visible and turning, two independent copies on one page, no overflow at 390 px, and no animation left under reduced motion. Minimum versions from @mdn/browser-compat-data: the rotation needs @property (Chrome 85, Firefox 128, Safari 16.4); the layers use inset (Chrome 87).
A browser that ignores @property keeps the gradients valid thanks to a fallback angle inside var(): both lines show their arcs, without smooth rotation (checked by removing the @property rules in Chromium).
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0769-root">
<div class="dlb-box">
<span class="dlb-outer-ring"></span>
<span class="dlb-outer-mask"></span>
<span class="dlb-inner-mask"></span>
Double Line
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
--dlb-c1, --dlb-c2 |
#ec4899, #06b6d4 |
Colours of the two arcs on the inner line (clockwise, anticlockwise). |
--dlb-c3 |
#8b5cf6 |
Colour of the arc on the outer line. |
--dlb-speed |
3s |
Time for one turn of the inner arcs. |
--dlb-speed-outer |
4s |
Time for one turn of the outer arc; a value different from the previous one keeps the arcs from always meeting at the same spot. |
--dlb-w, --dlb-h, --dlb-radius |
200px, 120px, 12px |
Size and corner radius; both lines follow the radius. A radius of half a square box gives a circle. |
--dlb-fill |
#0a0a0f |
Background of the box and of the gap between the lines: give it the colour of the surface the box sits on. |
FAQ
@property and the <angle> syntax, it becomes animatable, and the conic gradient using it turns frame by frame.<span> elements is drawn above the layers. For a round photo, use a square box with --dlb-radius at half its size, and an image slightly smaller than the box so the inner line stays visible.--dlb-fill to that light background: this colour hides the inside of the box and the 1 px gap between the two lines. Then pick arcs dark or saturated enough to stand out on white.
