Grainy Gradient Background
Two warm color clouds drift over a deep gradient under a fixed layer of film grain. The grain is an inline SVG feTurbulence filter blended with overlay, so it never needs an image file.
Also known as: animated grainy gradient background, noise gradient css, film grain gradient.
HTML
<div class="bgx-grainy-gradient" aria-hidden="true">
<span></span><span></span>
<svg class="bgx-grainy-gradient-grain" width="100%" height="100%">
<filter id="bgx-grainy-gradient-noise"><feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" stitchTiles="stitch" /><feColorMatrix type="saturate" values="0" /></filter>
<rect width="100%" height="100%" filter="url(#bgx-grainy-gradient-noise)" />
</svg>
</div>CSS
.bgx-grainy-gradient {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: linear-gradient(150deg, oklch(from var(--c) 0.3 0.1 calc(h + 60)), oklch(from var(--c) 0.2 0.08 calc(h - 10)) 60%, oklch(from var(--c) 0.16 0.06 calc(h - 40)));
isolation: isolate;
}
.bgx-grainy-gradient span {
position: absolute;
left: var(--x);
top: var(--y);
width: max(22em, 50%);
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: radial-gradient(closest-side, var(--o), transparent);
animation: bgx-grainy-gradient-drift var(--t) ease-in-out var(--d) infinite alternate;
}
.bgx-grainy-gradient span:nth-child(1) { --x: 28%; --y: 70%; --o: oklch(from var(--c) 0.7 0.2 calc(h + 110)); --t: 9s; --d: -2s; }
.bgx-grainy-gradient span:nth-child(2) { --x: 74%; --y: 26%; --o: oklch(from var(--c) 0.62 0.24 calc(h + 60)); --t: 11s; --d: -7s; }
.bgx-grainy-gradient-grain {
position: absolute;
inset: 0;
mix-blend-mode: overlay;
opacity: 0.55;
}
@keyframes bgx-grainy-gradient-drift {
from { transform: translate(-18%, 10%) scale(0.9); }
to { transform: translate(16%, -12%) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-grainy-gradient, .bgx-grainy-gradient *, .bgx-grainy-gradient::before, .bgx-grainy-gradient::after, .bgx-grainy-gradient *::before, .bgx-grainy-gradient *::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.