Marble Background
Charcoal, gold and accent veins drift through pale stone, bending round a fixed swirl of turbulence. An SVG displacement filter warps a sliding stripe tile, so keep it to one hero per page.
Also known as: marble texture css animation, flowing marble background, liquid marble css.
HTML
<div class="bgx-marble" aria-hidden="true">
<svg class="bgx-marble-defs" width="0" height="0">
<filter id="bgx-marble-warp" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="0.0045" numOctaves="3" seed="7" /><feDisplacementMap in="SourceGraphic" scale="260" xChannelSelector="R" yChannelSelector="G" /><feGaussianBlur stdDeviation="0.9" /></filter>
</svg>
<span></span>
</div>CSS
.bgx-marble {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: #f3f1ee;
}
.bgx-marble-defs {
position: absolute;
}
.bgx-marble span {
position: absolute;
inset: -45%;
background: linear-gradient(90deg,
#f3f1ee 0% 20%, oklch(from var(--c) 0.55 0.12 calc(h + 0)) 23%, #f3f1ee 26%,
#e7e3de 45%, #c8a25c 47%, #f3f1ee 50% 70%,
#2a2a33 72%, #f3f1ee 75% 100%) 0 0 / 12em 100%;
transform: rotate(-20deg);
filter: url(#bgx-marble-warp);
animation: bgx-marble-flow 20s linear infinite;
}
@keyframes bgx-marble-flow {
to { background-position: 12em 0; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-marble, .bgx-marble *, .bgx-marble::before, .bgx-marble::after, .bgx-marble *::before, .bgx-marble *::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.