Plasma Background
The old demoscene plasma: two fields of smooth color rings drift past each other and a difference blend turns their overlap into flowing cells of color. Pure gradients, only transforms move.
Also known as: plasma effect css, psychedelic background animation, retro demoscene plasma.
HTML
<div class="bgx-plasma" aria-hidden="true"></div>
CSS
.bgx-plasma {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: #000;
isolation: isolate;
}
.bgx-plasma::before,
.bgx-plasma::after {
content: "";
position: absolute;
inset: -100%;
background: repeating-radial-gradient(circle at var(--at), var(--a) 0, var(--b) 3em, var(--a) 6em);
animation: bgx-plasma-drift var(--t) cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite alternate;
}
.bgx-plasma::before {
--at: 42% 46%;
--a: oklch(from var(--c) 0.25 0.1 calc(h + 0));
--b: var(--c);
--t: 8s;
--d: -2s;
}
.bgx-plasma::after {
--at: 58% 52%;
--a: oklch(from var(--c) 0.3 0.1 calc(h + 120));
--b: oklch(from var(--c) 0.85 0.16 calc(h + 120));
--t: 11s;
--d: -7s;
mix-blend-mode: difference;
animation-direction: alternate-reverse;
}
@keyframes bgx-plasma-drift {
from { transform: translate(-6%, 4%) rotate(0deg); }
to { transform: translate(5%, -5%) rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-plasma, .bgx-plasma *, .bgx-plasma::before, .bgx-plasma::after, .bgx-plasma *::before, .bgx-plasma *::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.