Silk Background
Deep satin in your accent hangs in soft folds that ripple sideways as if a breeze moved it. An inline SVG displacement filter bends a sliding tile of light and shadow bands.
Also known as: satin background css, silk fabric animation css, flowing silk background.
HTML
<div class="bgx-silk" aria-hidden="true">
<svg class="bgx-silk-defs" width="0" height="0">
<filter id="bgx-silk-fold" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="0.0025 0.005" numOctaves="2" seed="4" /><feDisplacementMap in="SourceGraphic" scale="120" xChannelSelector="R" yChannelSelector="G" /><feGaussianBlur stdDeviation="1" /></filter>
</svg>
<span></span>
</div>CSS
.bgx-silk {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: oklch(from var(--c) 0.3 0.12 calc(h + 0));
}
.bgx-silk-defs {
position: absolute;
}
.bgx-silk span {
position: absolute;
inset: -7em;
background: linear-gradient(90deg,
oklch(from var(--c) 0.22 0.1 calc(h + 0)), oklch(from var(--c) 0.38 0.14 calc(h + 0)) 30%, oklch(from var(--c) 0.75 0.1 calc(h + 0)) 42%, oklch(from var(--c) 0.45 0.15 calc(h + 0)) 52%,
oklch(from var(--c) 0.28 0.12 calc(h + 0)) 70%, oklch(from var(--c) 0.5 0.14 calc(h + 0)) 85%, oklch(from var(--c) 0.22 0.1 calc(h + 0))) 0 0 / 16em 100%;
filter: url(#bgx-silk-fold);
animation: bgx-silk-sway 12s linear infinite;
}
@keyframes bgx-silk-sway {
to { background-position: 16em 0; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-silk, .bgx-silk *, .bgx-silk::before, .bgx-silk::after, .bgx-silk *::before, .bgx-silk *::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.