// app/components/MeshBackground/MeshBackground.tsx
import React from "react";
import styles from "./MeshBackground.module.css";
interface MeshBackgroundProps {
children?: React.ReactNode;
className?: string;
}
export default function MeshBackground({
children,
className = "",
}: MeshBackgroundProps) {
return (
<div className={`${styles.container} ${className}`}>
{/* The Blurred Mesh Layer */}
<div aria-hidden="true" className={styles.blurLayer}>
<div className={`${styles.blob} ${styles.blob1}`} />
<div className={`${styles.blob} ${styles.blob2}`} />
<div className={`${styles.blob} ${styles.blob3}`} />
</div>
{/* Dark overlay to ensure text contrast */}
<div className="absolute inset-0 z-0 bg-black/40" />
{/* Content wrapper */}
<div className="relative z-10 h-full w-full">{children}</div>
</div>
);
}
// Component source: https://codekk.dev/
Component details
Overview, install command, dependencies, and project links.
An animated mesh gradient background component built with Next.js and CSS Modules - no canvas, no WebGL, no JavaScript animation. Three oval blobs are positioned absolutely inside a filter: blur(120px) container - the extreme blur is what creates the liquid mesh look. Each blob runs two independent CSS animations simultaneously: a rotate keyframe that spins it continuously and a scale keyframe that pulses it between 90% and 110% - because rotate and scale are separate CSS properties they compose without overwriting each other. mix-blend-mode: screen on each blob makes the overlapping colors behave like light mixing instead of paint mixing, which is what gives the gradient its glow. A bg-black/40 overlay sits above the blob layer to keep text contrast readable without killing the gradient. The component wraps any children so it works as a full-page hero background, a card background, or a section background. Fully respects prefers-reduced-motion - all animations stop for users who have it enabled. Works as a Next.js App Router server component - no "use client" needed.
Discussion
Feedback, implementation tips, and usage notes.
Comments
Sign in to join the conversation