Mesh & Grainy Gradient Generator
Drag color points into soft mesh or aurora gradients, add grain, export CSS or 4K images.
Preview
Drag a point to move its color. Focus a point to move it with the arrow keys (Shift = 10%); Delete removes it. The preview has the shape of the download size.
Color points
Stretch below 0 makes the color taller, above 0 wider.
Look
Grain
Presets
CSS
Download
Noise texture
The grain on its own as a seamless gray tile (with your grain size and seed), for overlays in other designs.
About the Mesh & Grainy Gradient Generator
Create the soft, many-colored backgrounds known as mesh, aurora or blurry gradients. Place three to eight color points on the canvas and drag them around; each point is a glow of its own color that fades out softly, and together they blend into one smooth surface. Set each point’s color, opacity, size and stretch, how much the colors blur, and the blend mode that mixes them — normal, multiply, screen (which makes glowing aurora effects on dark backgrounds), overlay and twelve more. Randomize builds a harmonious mesh in one click.
Turn on film grain for the popular grainy look: an SVG noise layer (feTurbulence) blended over the colors, with its own amount, size and seed — and you can download that noise alone as a seamless texture. Copy the gradient as layered CSS (pure CSS plus, with grain, a tiny SVG tile), or download it as SVG, PNG or WebP at desktop, phone, tablet and social sizes up to 4K. Everything is drawn in your browser.
How to use it
- Pick a preset or select Randomize. Drag the round points on the preview to move the colors.
- Select a point (on the preview or in the list) to change its color, opacity, size and stretch. Add point and Remove change how many there are (3–8).
- Under Look, set the base color, the Blur and the Blend mode. Tick Add film grain and adjust its amount and size for a grainy texture.
- Copy the CSS, or choose an image size and download PNG, WebP or SVG.
- Need only the texture? Under Noise texture, download the grain as a seamless PNG or SVG tile.
Examples
Base #ffffff · points #ff0080 at 20% 30%, #0080ff at 80% 70%, #ffc800 at 50% 50% · size 50% · blur 100% · linear fade
.mesh-gradient {
background-color: #ffffff;
background-image:
radial-gradient(50% 50% at 50% 50%, #ffc800 0%, #ffc80000 100%),
radial-gradient(50% 50% at 80% 70%, #0080ff 0%, #0080ff00 100%),
radial-gradient(50% 50% at 20% 30%, #ff0080 0%, #ff008000 100%);
}Each point is a radial gradient from its color to the same color at 0% opacity; the last point is listed first because it is drawn on top.
Preset: Aurora (dark base, four stretched points, blend mode screen)
background-blend-mode: screen;
Screen lightens wherever colors overlap, like light, so stretched colors on a dark base glow like the northern lights.
Common uses
- Hero and landing-page backgrounds that feel modern without heavy images.
- Desktop, phone and tablet wallpapers and social media backgrounds in exact sizes.
- Grainy backgrounds for posters, album covers, slides and app splash screens.
- Seamless noise textures to add grain to other designs and 3D materials.
How the mesh is built
Each color point is one radial-gradient() (CSS Images 3) with an elliptical size in percent of the box, so the design keeps its look at any aspect ratio. The color stays solid for part of the radius and then fades to the same color at zero opacity — fading to transparent instead could pass through gray in some renderers. Blur decides how much of the radius fades: at 100% the color fades from the center, at 0% you get crisp discs. The Smooth fade follows the curve 1 − (3u² − 2u³), whose slope is zero at both ends, so no ring shows where the fade starts or stops; Linear writes only two stops per point for shorter CSS.
The layers sit on the base color and are mixed with background-blend-mode (Compositing and Blending Level 1); the SVG and the images use the same blend formulas through mix-blend-mode, so downloads match the preview.
Grain and seamless noise
The grain is fractal noise from the SVG feTurbulence filter (Filter Effects Level 1), turned into gray and given more contrast, then blended over the colors — overlay or soft light keep the colors and add texture. Its seed picks a different noise pattern; its size sets the noise frequency. In the CSS the grain is a small SVG tile with stitchTiles="stitch", which makes the noise wrap around at the tile edges so the tiles join without seams; the downloaded noise texture uses the same setting. The grain also hides the faint banding that smooth gradients can show on 8-bit screens.
Limitations
- This is a layered-gradient mesh, not a true gradient mesh with editable patches like in vector illustration apps.
- PNG and WebP images are at most 4,096 px on each side (4K wallpapers fit); the SVG has no size limit.
- Grain is drawn per pixel: on a high-density screen the CSS grain looks finer than in a 1× image. Check the image at its final size.
- Very large images with grain take a few seconds to draw, especially on phones.
- WebP is encoded by your browser; where it cannot (Safari), a built-in WebAssembly encoder is loaded once.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
What is a mesh gradient?
A gradient that blends many colors across a surface instead of along one line — here made from several soft radial gradients layered on a base color, which gives the same smooth, organic look and works as plain CSS.
How do I make a grainy gradient in CSS?
Tick Add film grain. The CSS then gets an extra top layer — a small SVG noise tile — blended with overlay or soft light. It is still a single background on one element, with no image file to host.
Which blend mode should I use?
Normal for pastel and light designs, Screen for glowing colors on dark backgrounds (aurora, neon), Multiply for deep, ink-like mixes on light backgrounds. The others are worth trying; the preview updates instantly.
Can I make a 4K wallpaper?
Yes. Choose Desktop · 3840 × 2160 (4K) or a phone or tablet size under Download, then PNG or WebP. The preview takes the shape of the chosen size.
Is the noise texture really seamless?
Yes. It uses feTurbulence with stitchTiles="stitch", which adjusts the noise so it wraps around at the tile edges; repeat the PNG or SVG tile as a background or texture and the joins do not show.
Is anything uploaded?
No. The gradient, the code and the images are made in your browser, and the page works offline once loaded.