Mesh gradient
Also called gradient mesh or freeform gradient
A smooth, multicolor gradient where several colors blend outward from different points, like paint mixing, often used for hero backgrounds.
// Four radial layers, each fading out from its own point, over a deep base.
const MESH =
'bg-[#1e1b4b] bg-[radial-gradient(at_20%_25%,#8b5cf6_0,transparent_55%),radial-gradient(at_80%_20%,#ec4899_0,transparent_50%),radial-gradient(at_75%_80%,#f59e0b_0,transparent_50%),radial-gradient(at_15%_85%,#14b8a6_0,transparent_55%)]';
export function MeshHero() {
return (
<section
className={`grid min-h-[480px] place-items-center px-6 text-center ${MESH}`}
>
<div>
<h1 className='text-5xl font-semibold tracking-tight text-white'>
Design in color
</h1>
<p className='mt-4 text-lg text-white/80'>
Palettes, gradients, and themes for every project.
</p>
</div>
</section>
);
}Create a hero background with a mesh gradient: a #1e1b4b base with four radial-gradient layers in violet, pink, amber, and teal, each about 60% wide and fading to transparent, placed near different corners. Drift each layer slowly with a 20-second transform animation, add a subtle grain overlay, and keep it still when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Mesh gradient?
A linear gradient blends colors along one line. A mesh gradient blends several colors placed at different points across a surface, so they flow into each other in every direction. Design tools build them from a grid of points; on the web, the usual approach stacks several radial-gradient() layers, each centered on its own point and fading to transparent.
Mesh gradients make warm, organic backgrounds for hero sections, app icons, wallpapers, and cards. Moving the color points slowly brings the background to life without pulling attention from the content.
Pick colors that sit near each other on the color wheel, or blend in a neutral, to avoid muddy gray where opposite colors meet. A little grain on top hides banding. If you animate it, move layers with transform instead of repainting gradients every frame, and keep it still for people who prefer reduced motion.
Often confused with
- Animated gradient
- An animated gradient is any gradient that moves or shifts over time. A mesh gradient is a blend of colors from several points, which may or may not move.
- Aurora background
- An aurora uses a few separate blurred ribbons drifting over a plain background. A mesh gradient blends color across the whole surface.
Related terms
All termsAurora background
A background of soft, blurred color ribbons that drift slowly, like the northern lights, used behind hero sections and landing pages.
Animated gradient
A color gradient that slowly shifts across a surface on a loop, often used behind a hero or call to action to add warmth and motion.
Grain texture
A fine layer of random noise placed over a gradient or image to add a tactile, printed feel and hide color banding.
Hero section
The large first section at the top of a landing page, with a headline, a short subhead, a call to action, and a visual.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.