Mesh gradient backgrounds
Soft colors that blend in every direction, often with a fine film grain. How a mesh gradient is built, the CSS recipe for a grainy one, a free generator, and a skill that animates it behind your hero.
Free skills to start. Pro is $79 a year for every skill, or $9.99 a month for 10. See pricing
What is a mesh gradient?
A mesh gradient blends several colors across a surface in two dimensions, so the color changes smoothly whichever way you look, unlike a linear gradient that only runs one way. It looks like soft light or out-of-focus color, and it is a staple of app sites, SaaS heroes, wallpapers and slide backgrounds.
The grainy gradient is the same idea with a layer of fine noise on top. The grain hides the banding that smooth gradients show on many screens, and gives a printed, tactile feel.
How the effect works
In CSS, a mesh is several radial gradients stacked on one background, each a colored glow at a different spot fading to transparent, over a base color. Where the glows overlap their colors mix. Moving the spots or animating background-position makes it drift.
Grain is noise drawn over the top at low opacity. An SVG feTurbulence filter makes good noise with no image file, and blending it with overlay or soft-light keeps the colors intact. In a shader, a mesh gradient blends colors in linear light so mixes stay bright instead of turning muddy.
01
Pick 3 to 6 colors
Neighbors on the color wheel blend cleanly. Opposites meet in gray unless you place them apart.
02
Place the glows
One radial-gradient per color, at different positions and sizes, each fading to transparent.
03
Add the grain
An SVG noise tile on a pseudo-element at 10 to 20 % opacity with mix-blend-mode: overlay.
04
Keep a calm patch
Leave a quieter area where the headline sits so the text reads over every part of the drift.
HTML
A grainy mesh gradient in CSS
Four radial glows over a warm base, with SVG fractal noise as grain. No images and no JavaScript. Swap the four colors for your palette.
<section class="mesh"><h1>Make it soft</h1></section>
<style>
.mesh {
position: relative; isolation: isolate;
min-height: 70vh; display: grid; place-items: center;
font: 700 clamp(40px, 8vw, 84px)/1 system-ui; color: #1d1a24;
background:
radial-gradient(at 15% 20%, #ff9a8b 0, transparent 55%),
radial-gradient(at 85% 15%, #8ec5fc 0, transparent 50%),
radial-gradient(at 70% 85%, #e0c3fc 0, transparent 55%),
radial-gradient(at 20% 90%, #fbe38e 0, transparent 50%),
#f6f1ea;
}
.mesh::after {
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
opacity: 0.22; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
</style>A starting point written for this page, free to use in your own projects. The skills below build the finished version with checks, fallbacks and a recorded video.
What to get right on a real page
01
Check text on every color
A headline that reads on the peach patch can vanish on the pale blue one. Test contrast against each color in the mesh, or keep the text over a calm patch.
02
Use grain to stop banding
Smooth gradients band on 8-bit screens and in compressed video. A little noise breaks up the steps.
03
Animate slowly
A drift that takes 10 to 20 seconds feels like light. Faster reads as a screensaver.
04
Bring your own palette
Signature gradients belong to their brands. Build yours from your own colors so it reads as you.
Skills that build a mesh gradient
Try the free generator for a still background, or have an agent build the animated hero.
- Mesh Gradient Grain HeroClaude CodeCodexCursor+3 more agents
Motion Heroes · Pro
Mesh Gradient Grain Hero
Animated WebGL hero · page + embed + 1080p video
A slowly drifting mesh gradient in three to six of your colors, blended in linear light and folded by a gentle warp, with fine film grain at 24 frames a second and a calm patch held behind the copy. A floating glass disc or pill refracts it, and the build tests every color against your text.
Worth knowing: Loud, high-contrast palettes are rejected on purpose.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Mesh Gradient Grain Hero makes
Install
Build a mesh gradient with your agent
Each skill is a SKILL.md folder, so it installs the same way in Claude Code, Codex, Cursor and other agents. The example below uses Mesh Gradient Grain Hero; each skill page has its own prompt.
1. Paste the install prompt
Your agent runs the installer. The first time, it shows a sign-in link so you can approve it in the browser.
Install the "Mesh Gradient Grain Hero" skill from Lookbk (https://lookbk.dev/skills/mesh-gradient-grain-hero). 1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add mesh-gradient-grain-hero 2. If it prints a sign-in link, show it to me. When I say I approved it, run the same command again. 3. When the install finishes, read the SKILL.md it installed and tell me what you need from me to make the first result.
Or run it in a terminal
curl -fsSL https://lookbk.dev/cli.js | node - add mesh-gradient-grain-hero2. Start a new session
Agents load skills when a session starts. The installer writes the folder where your agent looks:
- Claude Code
- ~/.claude/skills/mesh-gradient-grain-hero
- Codex
- ~/.agents/skills/mesh-gradient-grain-hero
- Cursor
- ~/.agents/skills/mesh-gradient-grain-hero
3. Ask for the result
Describe it in plain words, for example:
Build a Mesh Gradient Grain hero for Stillwater, a breathwork app: peach, rose, sage, cream and periwinkle on warm paper, a glass disc beside the copy, headline 'Breathe out the whole day.', and record the 12-second loop.
Another agent? Install a skill in any agent
FAQ
Questions
Still stuck? The guides cover installing, agents and licensing in more detail.
Read the guidesHow do I make a mesh gradient in CSS?
Stack several radial-gradient() layers on one background, each a color at a different position fading to transparent, over a base color. The starter on this page uses four.
How do I make a grainy gradient?
Put an SVG feTurbulence noise tile on a pseudo-element over the gradient at about 20 % opacity with mix-blend-mode: overlay. It also removes banding.
Is there a free mesh gradient generator?
Yes, the Lookbk mesh gradient generator runs in your browser and exports a PNG or the CSS. It is linked below.
Can a mesh gradient be animated?
In CSS, animate background-position or the size of the layers. For a smooth, warping drift with grain and refraction, a WebGL shader looks far better, which is what Mesh Gradient Grain Hero uses.