Six CSS-only radial gradients that slowly drift across a dark surface and blend into an organic color wash — no JavaScript required.
This effect is free — the Backgrounds category contains 50 effects total, including 6 free. Effect.Labs has 811 vanilla effects. Explore the category →
An open platform combining AI, automation and real-time analytics — no lock-in.
A creative studio at the crossroads of design and technology, based in Paris since 2017.
Sign in to continue
Forgot password?
The background is built with a single background property stacking six radial-gradient() layers, each defined by an absolute position (at x% y%): every halo starts with a saturated color at its center and fades to transparent over 50% of the container. The base color rgb(10, 10, 15), placed last in the shorthand, acts as the scene backdrop — it shows through wherever all gradients are fully transparent.
The animation relies on @keyframes meshMove, which animates the background-position of all six layers independently. At 0% and 100%, the halos sit at their starting positions (0% 0%, 100% 0%…); at 50%, they cross to opposite positions (100% 100%, 0% 100%…). This crossover sends each color center toward the opposite corner and back, creating a breathing effect over a 20-second ease cycle.
The visual blending is handled entirely by native CSS compositing: gradient layers stack on top of each other, transparent zones reveal the layers below and the base color. No canvas, no JS computation — the browser handles position interpolation via its GPU renderer, keeping the animation lightweight even on large surfaces.
@media (prefers-reduced-motion: reduce) { .demo-preview.bg-mesh { animation: none; } } before deploying..bg-mesh container has no role or aria-label — it is purely decorative. Text content placed over it must live in a sibling or child element to remain accessible to screen readers..bg-label ('Mesh' text, centered) is absolutely positioned with a semi-transparent black text-shadow. No WCAG contrast ratio is guaranteed: the background is dynamic and shifts hue continuously. Replace or hide it in production.Requires CSS animations (@keyframes) and multi-layer background shorthand with position — supported in all modern browsers since 2013.
Without <code>@keyframes</code> support (IE 9 and older): the six gradients render statically over the base color — consistent look, no animation. On IE 8, the multi-layer <code>background</code> shorthand is ignored and only the base color <code>rgb(10, 10, 15)</code> displays.
Copy the three blocks into your page. No dependencies.
<div class="bg-mesh" style="width:100%;min-height:300px;">
<span class="bg-label">Mesh</span>
</div>@keyframes meshMove {
0%, 100% {
background-position: 0% 0%, 100% 0%, 0% 100%, 100% 50%, 0% 100%, 100% 100%;
}
50% {
background-position: 100% 100%, 0% 100%, 100% 0%, 0% 50%, 100% 0%, 0% 0%;
}
}
.bg-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: 700;
font-size: 1.5rem;
color: white;
text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 10px;
z-index: 10;
}// Effet CSS pur — pas de JavaScript nécessaireOptions passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| radial-gradient() colors (in the CSS) | indigo · fuchsia · cyan · violet · indigo · rose | Replace the 6 rgb() values inside the radial-gradient() declarations. Each gradient targets a distinct zone — edit them independently to match your brand colors. |
| animation-duration (20s) | 20s | Duration of one full cycle in the animation property. 10 s = noticeable movement; 40 s = very slow, near-imperceptible drift. Change only this value in the animation shorthand. |
| animation-timing-function (ease) | ease | Replace ease with linear for constant speed or cubic-bezier(0.45,0,0.55,1) for a more pronounced breathing rhythm at the extremes. |
| Base color (rgb(10, 10, 15)) | rgb(10, 10, 15) | Last value in the background shorthand: the tint visible at transparent intersections. Switch to #fff for a light theme — the gradients behave very differently over a white base (pastel tones recommended). |
| Gradient radius (transparent 50%) | 50% | The 50% value in each radial-gradient(…, transparent 50%) controls halo size. 30% = distinct, high-contrast halos; 70% = wide washes that nearly fully blend into each other. |
| animation-play-state | running | Set to paused via JS (el.style.animationPlayState = 'paused') to cleanly freeze the animation without removing it — useful for a Pause button or to honor prefers-reduced-motion from JavaScript. |
No — it's pure CSS. Copy the HTML block and the CSS and you're done. No dependencies, no bundle. Compatible with any framework (React, Vue, Svelte, Angular): wrap the <div class="bg-mesh"> in a component and the styles apply immediately with no configuration.
Replace the base color rgb(10, 10, 15) with #ffffff (or a light tint of your choice) at the end of the background shorthand, then use pastel gradient colors (rgba() with high transparency or low-saturation HSL). Over a white base, transparent gradients blend softly into white — the result looks very different from dark mode.
Yes, with a scrim between the background and the text: an absolutely positioned <div> (inset: 0) with background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.25)) is enough. White text then achieves a reliable WCAG AA contrast ratio even as the gradients shift to lighter zones.
