Dithered Pixel Border
A pixel comet steps around a notched frame and its tail breaks up into an ordered dither as it fades. Four masked layers each keep one pixel of every 2 by 2 block, with tails of four lengths.
Also known as: pixel border css, dither border animation, retro pixel frame css.
Indexing repo
HTML
<div class="bdr-dithered-pixel-border"> <span class="bdr-dithered-pixel-border-px" aria-hidden="true"></span> <span class="bdr-dithered-pixel-border-px" aria-hidden="true"></span> <span class="bdr-dithered-pixel-border-px" aria-hidden="true"></span> <span class="bdr-dithered-pixel-border-px" aria-hidden="true"></span> <span class="bdr-dithered-pixel-border-px" aria-hidden="true"></span> <span class="bdr-dithered-pixel-border-text">Indexing repo<i></i></span> </div>
CSS
@property --bdr-dithered-pixel-border-a {
syntax: "<angle>";
inherits: true;
initial-value: 0deg;
}
.bdr-dithered-pixel-border {
--c: var(--bdr-color, #3b82f6);
font-size: var(--bdr-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 15em;
height: 8.5em;
border-radius: 1em;
font-family: system-ui, sans-serif;
font-weight: 600;
--px: 0.25em;
border-radius: 0;
background: color-mix(in srgb, var(--c) 8%, #0a0b10);
color: color-mix(in srgb, var(--c) 25%, #fff);
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-weight: 600;
clip-path: polygon(var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px), 100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%, var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)), 0 var(--px), var(--px) var(--px));
animation: bdr-dithered-pixel-border-step 3.6s steps(60) infinite;
}
.bdr-dithered-pixel-border-px {
--len: 100%;
--at: 0 0;
position: absolute;
inset: 0;
padding: calc(var(--px) * 2);
background: var(--c);
pointer-events: none;
-webkit-mask:
conic-gradient(from var(--bdr-dithered-pixel-border-a), transparent 0 calc(100% - var(--len)), #000 0),
conic-gradient(#000 0 25%, transparent 0) var(--at) / calc(var(--px) * 2) calc(var(--px) * 2),
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: source-in, source-in, xor;
mask:
conic-gradient(from var(--bdr-dithered-pixel-border-a), transparent 0 calc(100% - var(--len)), #000 0),
conic-gradient(#000 0 25%, transparent 0) var(--at) / calc(var(--px) * 2) calc(var(--px) * 2),
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: intersect, intersect, exclude;
}
/* A dim track, then four tails: each lights one pixel of every 2 by 2 block, in Bayer order. */
.bdr-dithered-pixel-border-px:nth-child(1) { --at: var(--px) var(--px); opacity: 0.22; }
.bdr-dithered-pixel-border-px:nth-child(2) { --len: 30%; }
.bdr-dithered-pixel-border-px:nth-child(3) { --len: 19%; --at: var(--px) var(--px); }
.bdr-dithered-pixel-border-px:nth-child(4) { --len: 11%; --at: var(--px) 0; }
.bdr-dithered-pixel-border-px:nth-child(5) { --len: 5%; --at: 0 var(--px); }
.bdr-dithered-pixel-border-text {
font-size: 0.85em;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.bdr-dithered-pixel-border-text i {
display: inline-block;
width: 0.55em;
height: 1em;
margin-left: 0.3em;
vertical-align: -0.15em;
background: var(--c);
animation: bdr-dithered-pixel-border-blink 1.2s steps(1) infinite;
}
@keyframes bdr-dithered-pixel-border-step {
to { --bdr-dithered-pixel-border-a: 360deg; }
}
@keyframes bdr-dithered-pixel-border-blink {
50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.bdr-dithered-pixel-border,
.bdr-dithered-pixel-border-text i { animation: none; }
.bdr-dithered-pixel-border { --bdr-dithered-pixel-border-a: 120deg; }
}
@media (prefers-reduced-motion: reduce) {
.bdr-dithered-pixel-border, .bdr-dithered-pixel-border *, .bdr-dithered-pixel-border::before, .bdr-dithered-pixel-border::after, .bdr-dithered-pixel-border *::before, .bdr-dithered-pixel-border *::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.