Holographic Background
A silvery foil with pastel rainbow bands and fine diagonal streaks sliding against each other, plus a glare that sweeps across. Blend modes do the iridescence, not images.
Also known as: holographic gradient css, iridescent background css, holo foil background.
HTML
<div class="bgx-holographic" aria-hidden="true"><span></span></div>
CSS
.bgx-holographic {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: linear-gradient(160deg, #eef0f6, #dde3ee 45%, #f3eef7);
isolation: isolate;
}
.bgx-holographic::before,
.bgx-holographic::after {
content: "";
position: absolute;
inset: -80% -30%;
animation: bgx-holographic-slide var(--t) linear infinite var(--dir, normal);
}
.bgx-holographic::before {
--tile: 26em;
--t: 9s;
background: linear-gradient(90deg, oklch(from var(--c) 0.86 0.11 calc(h + 0)), oklch(from var(--c) 0.88 0.1 calc(h + 60)), oklch(from var(--c) 0.9 0.1 calc(h + 120)), oklch(from var(--c) 0.88 0.1 calc(h + 180)), oklch(from var(--c) 0.86 0.11 calc(h + 240)), oklch(from var(--c) 0.86 0.12 calc(h + 300)), oklch(from var(--c) 0.86 0.11 calc(h + 0))) 0 0 / var(--tile) 100%;
transform: rotate(-28deg);
mix-blend-mode: multiply;
}
.bgx-holographic::after {
--tile: 4.5em;
--t: 6s;
--dir: reverse;
background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.75) 35%, rgb(255 255 255 / 0) 55%, rgb(40 40 70 / 0.12) 80%, rgb(255 255 255 / 0)) 0 0 / var(--tile) 100%;
transform: rotate(38deg);
mix-blend-mode: soft-light;
}
.bgx-holographic span {
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 38%, rgb(255 255 255 / 0.7) 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
mix-blend-mode: screen;
animation: bgx-holographic-glare 5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes bgx-holographic-slide {
to { background-position: var(--tile) 0; }
}
@keyframes bgx-holographic-glare {
0% { background-position: 100% 0; }
60%, 100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-holographic, .bgx-holographic *, .bgx-holographic::before, .bgx-holographic::after, .bgx-holographic *::before, .bgx-holographic *::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.