Low Poly Background
A faceted low poly surface whose triangles catch the light one by one, so the whole sheet shimmers. Three masks with scattered opacities cross fade over a dark accent base, using opacity only.
Also known as: triangle background css, polygon background animation, low poly pattern.
HTML
<div class="bgx-low-poly-triangles" aria-hidden="true"><span></span><span></span><span></span></div>
CSS
.bgx-low-poly-triangles {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--tw: 18em;
--th: 5.196em;
background: color-mix(in srgb, var(--c) 30%, #080a10);
}
.bgx-low-poly-triangles span {
position: absolute;
inset: 0;
-webkit-mask: var(--facets) 0 0 / var(--tw) var(--th);
mask: var(--facets) 0 0 / var(--tw) var(--th);
}
.bgx-low-poly-triangles span:nth-child(1) {
background: color-mix(in srgb, var(--c) 70%, transparent);
--facets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34.64' preserveAspectRatio='none'%3E%3Cpath d='M0 17.32L20 17.32L10 0Z' fill-opacity='0.12'/%3E%3Cpath d='M20 17.32L40 17.32L30 0Z' fill-opacity='0.51'/%3E%3Cpath d='M40 17.32L60 17.32L50 0Z' fill-opacity='0.39'/%3E%3Cpath d='M60 17.32L80 17.32L70 0Z' fill-opacity='0.16'/%3E%3Cpath d='M80 17.32L100 17.32L90 0Z' fill-opacity='0.88'/%3E%3Cpath d='M100 17.32L120 17.32L110 0Z' fill-opacity='0.48'/%3E%3Cpath d='M-10 0L10 0L0 17.32Z' fill-opacity='0.58'/%3E%3Cpath d='M110 0L130 0L120 17.32Z' fill-opacity='0.58'/%3E%3Cpath d='M10 0L30 0L20 17.32Z' fill-opacity='0.53'/%3E%3Cpath d='M30 0L50 0L40 17.32Z' fill-opacity='0.54'/%3E%3Cpath d='M50 0L70 0L60 17.32Z' fill-opacity='0.37'/%3E%3Cpath d='M70 0L90 0L80 17.32Z' fill-opacity='0.31'/%3E%3Cpath d='M90 0L110 0L100 17.32Z' fill-opacity='0.75'/%3E%3Cpath d='M-10 34.64L10 34.64L0 17.32Z' fill-opacity='0.24'/%3E%3Cpath d='M110 34.64L130 34.64L120 17.32Z' fill-opacity='0.24'/%3E%3Cpath d='M10 34.64L30 34.64L20 17.32Z' fill-opacity='0.45'/%3E%3Cpath d='M30 34.64L50 34.64L40 17.32Z' fill-opacity='0.64'/%3E%3Cpath d='M50 34.64L70 34.64L60 17.32Z' fill-opacity='0.85'/%3E%3Cpath d='M70 34.64L90 34.64L80 17.32Z' fill-opacity='0.46'/%3E%3Cpath d='M90 34.64L110 34.64L100 17.32Z' fill-opacity='0.19'/%3E%3Cpath d='M0 17.32L20 17.32L10 34.64Z' fill-opacity='0.31'/%3E%3Cpath d='M20 17.32L40 17.32L30 34.64Z' fill-opacity='0.77'/%3E%3Cpath d='M40 17.32L60 17.32L50 34.64Z' fill-opacity='0.64'/%3E%3Cpath d='M60 17.32L80 17.32L70 34.64Z' fill-opacity='0.61'/%3E%3Cpath d='M80 17.32L100 17.32L90 34.64Z' fill-opacity='0.54'/%3E%3Cpath d='M100 17.32L120 17.32L110 34.64Z' fill-opacity='0.33'/%3E%3C/svg%3E");
}
.bgx-low-poly-triangles span:nth-child(2),
.bgx-low-poly-triangles span:nth-child(3) {
background: color-mix(in srgb, var(--c) 55%, #fff);
opacity: 0;
animation: bgx-low-poly-triangles-glint 5s ease-in-out infinite;
}
.bgx-low-poly-triangles span:nth-child(2) {
--facets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34.64' preserveAspectRatio='none'%3E%3Cpath d='M0 17.32L20 17.32L10 0Z' fill-opacity='0.12'/%3E%3Cpath d='M20 17.32L40 17.32L30 0Z' fill-opacity='0.84'/%3E%3Cpath d='M40 17.32L60 17.32L50 0Z' fill-opacity='0.92'/%3E%3Cpath d='M60 17.32L80 17.32L70 0Z' fill-opacity='0.38'/%3E%3Cpath d='M80 17.32L100 17.32L90 0Z' fill-opacity='0.52'/%3E%3Cpath d='M100 17.32L120 17.32L110 0Z' fill-opacity='0.43'/%3E%3Cpath d='M-10 0L10 0L0 17.32Z' fill-opacity='0.44'/%3E%3Cpath d='M110 0L130 0L120 17.32Z' fill-opacity='0.44'/%3E%3Cpath d='M10 0L30 0L20 17.32Z' fill-opacity='0.72'/%3E%3Cpath d='M30 0L50 0L40 17.32Z' fill-opacity='0.74'/%3E%3Cpath d='M50 0L70 0L60 17.32Z' fill-opacity='0.21'/%3E%3Cpath d='M70 0L90 0L80 17.32Z' fill-opacity='0.23'/%3E%3Cpath d='M90 0L110 0L100 17.32Z' fill-opacity='0.18'/%3E%3Cpath d='M-10 34.64L10 34.64L0 17.32Z' fill-opacity='0.21'/%3E%3Cpath d='M110 34.64L130 34.64L120 17.32Z' fill-opacity='0.21'/%3E%3Cpath d='M10 34.64L30 34.64L20 17.32Z' fill-opacity='0.12'/%3E%3Cpath d='M30 34.64L50 34.64L40 17.32Z' fill-opacity='0.60'/%3E%3Cpath d='M50 34.64L70 34.64L60 17.32Z' fill-opacity='0.44'/%3E%3Cpath d='M70 34.64L90 34.64L80 17.32Z' fill-opacity='0.53'/%3E%3Cpath d='M90 34.64L110 34.64L100 17.32Z' fill-opacity='0.32'/%3E%3Cpath d='M0 17.32L20 17.32L10 34.64Z' fill-opacity='0.22'/%3E%3Cpath d='M20 17.32L40 17.32L30 34.64Z' fill-opacity='0.95'/%3E%3Cpath d='M40 17.32L60 17.32L50 34.64Z' fill-opacity='0.21'/%3E%3Cpath d='M60 17.32L80 17.32L70 34.64Z' fill-opacity='0.93'/%3E%3Cpath d='M80 17.32L100 17.32L90 34.64Z' fill-opacity='0.19'/%3E%3Cpath d='M100 17.32L120 17.32L110 34.64Z' fill-opacity='0.98'/%3E%3C/svg%3E");
}
.bgx-low-poly-triangles span:nth-child(3) {
--facets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34.64' preserveAspectRatio='none'%3E%3Cpath d='M0 17.32L20 17.32L10 0Z' fill-opacity='0.12'/%3E%3Cpath d='M20 17.32L40 17.32L30 0Z' fill-opacity='0.28'/%3E%3Cpath d='M40 17.32L60 17.32L50 0Z' fill-opacity='0.57'/%3E%3Cpath d='M60 17.32L80 17.32L70 0Z' fill-opacity='0.61'/%3E%3Cpath d='M80 17.32L100 17.32L90 0Z' fill-opacity='0.16'/%3E%3Cpath d='M100 17.32L120 17.32L110 0Z' fill-opacity='0.38'/%3E%3Cpath d='M-10 0L10 0L0 17.32Z' fill-opacity='0.31'/%3E%3Cpath d='M110 0L130 0L120 17.32Z' fill-opacity='0.31'/%3E%3Cpath d='M10 0L30 0L20 17.32Z' fill-opacity='0.92'/%3E%3Cpath d='M30 0L50 0L40 17.32Z' fill-opacity='0.94'/%3E%3Cpath d='M50 0L70 0L60 17.32Z' fill-opacity='0.94'/%3E%3Cpath d='M70 0L90 0L80 17.32Z' fill-opacity='0.14'/%3E%3Cpath d='M90 0L110 0L100 17.32Z' fill-opacity='0.48'/%3E%3Cpath d='M-10 34.64L10 34.64L0 17.32Z' fill-opacity='0.17'/%3E%3Cpath d='M110 34.64L130 34.64L120 17.32Z' fill-opacity='0.17'/%3E%3Cpath d='M10 34.64L30 34.64L20 17.32Z' fill-opacity='0.67'/%3E%3Cpath d='M30 34.64L50 34.64L40 17.32Z' fill-opacity='0.57'/%3E%3Cpath d='M50 34.64L70 34.64L60 17.32Z' fill-opacity='0.91'/%3E%3Cpath d='M70 34.64L90 34.64L80 17.32Z' fill-opacity='0.60'/%3E%3Cpath d='M90 34.64L110 34.64L100 17.32Z' fill-opacity='0.44'/%3E%3Cpath d='M0 17.32L20 17.32L10 34.64Z' fill-opacity='0.14'/%3E%3Cpath d='M20 17.32L40 17.32L30 34.64Z' fill-opacity='0.24'/%3E%3Cpath d='M40 17.32L60 17.32L50 34.64Z' fill-opacity='0.67'/%3E%3Cpath d='M60 17.32L80 17.32L70 34.64Z' fill-opacity='0.36'/%3E%3Cpath d='M80 17.32L100 17.32L90 34.64Z' fill-opacity='0.72'/%3E%3Cpath d='M100 17.32L120 17.32L110 34.64Z' fill-opacity='0.76'/%3E%3C/svg%3E");
animation-delay: -2.5s;
}
@keyframes bgx-low-poly-triangles-glint {
0%, 100% { opacity: 0; }
50% { opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-low-poly-triangles, .bgx-low-poly-triangles *, .bgx-low-poly-triangles::before, .bgx-low-poly-triangles::after, .bgx-low-poly-triangles *::before, .bgx-low-poly-triangles *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-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.