Isometric Cubes Background
A field of isometric cubes whose light slowly circles around, so the cubes seem to flip between popping out and caving in. Three masked face layers cross fade with opacity only.
Also known as: tumbling blocks pattern css, 3d cubes pattern background, isometric pattern animation.
HTML
<div class="bgx-isometric-cubes" aria-hidden="true"> <span class="bgx-isometric-cubes-top"></span> <span class="bgx-isometric-cubes-left"></span> <span class="bgx-isometric-cubes-right"></span> </div>
CSS
.bgx-isometric-cubes {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--tw: 2.1651em;
--th: 3.75em;
background: color-mix(in srgb, var(--c) 70%, #0a0c12);
}
.bgx-isometric-cubes span {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--c) 45%, #0a0c12);
-webkit-mask: var(--face) 0 0 / var(--tw) var(--th);
mask: var(--face) 0 0 / var(--tw) var(--th);
}
.bgx-isometric-cubes span::after {
content: "";
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--c) 45%, #fff);
opacity: var(--lit);
animation: bgx-isometric-cubes-light 6s ease-in-out var(--lag, 0s) infinite;
}
.bgx-isometric-cubes-top {
--lit: 1;
--face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.32 30' preserveAspectRatio='none'%3E%3Cpath d='M0 5L8.66 10L0 15L-8.66 10ZM17.32 5L25.98 10L17.32 15L8.66 10ZM8.66 20L17.32 25L8.66 30L0 25Z' stroke='%23000' stroke-width='.3'/%3E%3C/svg%3E");
}
.bgx-isometric-cubes-left {
--face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.32 30' preserveAspectRatio='none'%3E%3Cpath d='M0 -5L8.66 0L8.66 10L0 5ZM8.66 10L17.32 15L17.32 25L8.66 20ZM0 25L8.66 30L8.66 40L0 35Z' stroke='%23000' stroke-width='.3'/%3E%3C/svg%3E");
}
.bgx-isometric-cubes-right {
--face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.32 30' preserveAspectRatio='none'%3E%3Cpath d='M8.66 0L17.32 -5L17.32 5L8.66 10ZM0 15L8.66 10L8.66 20L0 25ZM8.66 30L17.32 25L17.32 35L8.66 40Z' stroke='%23000' stroke-width='.3'/%3E%3C/svg%3E");
}
.bgx-isometric-cubes-left { --lag: -2s; --lit: 0.4; }
.bgx-isometric-cubes-right { --lag: -4s; --lit: 0; }
@keyframes bgx-isometric-cubes-light {
0%, 100% { opacity: 1; }
33% { opacity: 0.4; }
66% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-isometric-cubes, .bgx-isometric-cubes *, .bgx-isometric-cubes::before, .bgx-isometric-cubes::after, .bgx-isometric-cubes *::before, .bgx-isometric-cubes *::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.