Monochrome Mesh
Two layered CSS pseudo-elements — blur, radial gradients and opposite phases — weave a luminous blue-indigo mesh, pure CSS, zero JavaScript.
You'll get access to the interactive demo with a free account.
This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Backgrounds has 50 effects, including 6 free. Explore the category →
3 usage examples
How it works
The .mono-mesh container has overflow: hidden and a near-black base (#050510). Its two pseudo-elements ::before and ::after are positioned absolute with inset: -25% / -20%: they bleed beyond every edge, but overflow: hidden clips them. This oversizing ensures no white fringing appears during the animation's translate steps.
Each pseudo-element stacks several radial-gradient() layers: ::before composites five (positions 20%/25%, 75%/30%, 40%/75%, 85%/80%, 10%/60%) in blue and indigo tones (rgba 30–100, 30–80, 160–240, opacity 0.45–0.70); ::after adds three complementary, more violet halos (up to rgba(90, 70, 255, .35)). A filter: blur(30px) / blur(25px) merges these eight point sources into continuous color clouds — the mesh emerges from their overlap.
The @keyframes monoShift animation combines translate (±4–6% on X and Y) with scale (0.94–1.06) across four keyframes (0%, 33%, 66%, 100%). ::before runs at 10 s with alternate, ::after at 13 s with alternate-reverse: the two layers drift in different directions and speeds. Their LCM is 130 s — visible repetition is imperceptible and motion feels organic.
The effect is 100% declarative: js is empty, no script is loaded. The <span class="mono-mesh-label"> element uses position: relative; z-index: 1 to float above the pseudo-elements with a centered display: flex layout and a diffuse blue text-shadow.
Accessibility
- prefers-reduced-motion: absent from the code — the animation runs continuously regardless of system preference. Recommended: add
@media (prefers-reduced-motion: reduce) { .mono-mesh::before, .mono-mesh::after { animation: none; } }. - No
aria-hiddenattribute on the container: for purely decorative use, addaria-hidden="true"to.mono-meshso screen readers skip the empty pseudo-element structure. - Label color:
rgba(180, 200, 255, .9)on#050510background — contrast ratio ≥ 12:1, WCAG AAA. - No interaction required: the effect is 100% passive (no click, no JS event) — no keyboard navigation requirement.
- Graceful degradation: without CSS
animationsupport (very old browsers), gradients render statically — fixed blue-indigo background, no JS errors in any case.
Browser compatibility
Relies on radial-gradient, filter: blur, and CSS animation — supported since Chrome 26, Firefox 35, and Safari 9. Zero JavaScript dependency.
Without <code>animation</code> support, gradients display statically (fixed blue-indigo background, no motion). Without <code>filter: blur</code>, halos remain distinct but readable. No JS errors in any case.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="mono-mesh" aria-hidden="true">
<!-- Optional content (label or overlay) -->
<span class="mono-mesh-label">INDIGO</span>
</div>Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| Color palette — rgba in ::before / ::after | 8 blue-indigo halos | Replace the RGB values in radial-gradient layers on ::before (5 halos) and ::after (3 halos) to switch palette — e.g. purple, emerald green, steel grey. |
| filter: blur(30px) and blur(25px) | 30px / 25px | Lower (10–15 px) = crisper, higher-contrast mesh; higher (50–60 px) = very diffuse, atmospheric look. |
| inset: -25% and -20% | -25% / -20% | Controls halo overflow. More negative (e.g. -40%) = wider halos; closer to 0% = gradients concentrated at center. |
| Durations 10s and 13s (animation) | 10s / 13s | Unequal durations create a natural beat (LCM = 130 s). Slow down (20s/26s) for a hypnotic effect; speed up (4s/5s) for stronger dynamism. Keep the ~1.3 ratio. |
| @keyframes monoShift — translate / scale amplitudes | translate(6%, -4%) scale(1.06) max | Increase percentages for broader motion; reduce to translate(1%, -1%) and scale(1) for a near-static effect. |
| background: #050510 on .mono-mesh | #050510 | Base color visible where halos have low coverage. #000 for more depth; #0a0a1a for a slightly lighter midnight blue. |
| .mono-mesh { width; height } | 320px × 220px | Change to width: 100%; height: 100% to fill the parent. The effect adapts to any size — gradient positions in % remain proportional. |
FAQ
radial-gradient, filter: blur, and animation on two pseudo-elements. No script is loaded. It integrates without modification into React, Vue, Svelte or any other framework: simply place .mono-mesh inside your component.radial-gradient layers of .mono-mesh::before (5 halos) and ::after (3 halos). For an emerald green palette, replace e.g. rgba(30, 50, 180, .7) with rgba(20, 160, 80, .7), keeping the structure intact. All hues work; monochrome ranges (shades of one color) produce the most elegant results..mono-mesh container has position: relative and overflow: hidden: add a direct child with position: relative; z-index: 1 (like the included .mono-mesh-label) to float it above the pseudo-elements. Place a heading, button, or card there — the mesh stays in the background.
