Affinity's mesh gradient produces a rich, multi-color blend inside a single vector object, but the result lives only inside the Affinity file and cannot be exported as live CSS for the web. To get the same soft, multi-point look on a real web component, you need a stack of CSS radial gradients positioned at fixed focal points over a solid base color, not a bitmap export and not an SVG fragment. The Mesh Gradient Generator does exactly that: you pick four colors and one base background color, watch a live CSS preview, adjust a single fade spread value between 10 and 90 percent, and copy the validated background-color and background-image declarations straight into your stylesheet. The preview uses the exact declarations shown in the output, so what you see is what your component will paint. Every layer is a circle centered at one of four fixed positions near the corners, and each color fades to transparent at the chosen percentage, which is the standard CSS radial-gradient shape browsers already understand.
The Affinity Mesh Gradient Problem: Beauty That Stays in the File
Affinity Designer and Affinity Photo both ship a real mesh gradient tool. Affinity's own documentation describes a mesh gradient as a grid of horizontal and vertical lines drawn over a vector object with color stops at each intersection, applied to a fill or stroke. You can move nodes, drag handles, sample colors, and blend multiple regions inside a single shape. It is genuinely the most expressive gradient tool Affinity ships, and the result is often the centerpiece of a design.
The problem shows up at export time. Affinity can save the file in its native .afdesign or .afphoto format, rasterize it to PNG or JPG, or flatten the artwork into SVG. None of those paths give you the mesh gradient as live CSS. A PNG becomes a fixed-size bitmap that does not scale cleanly, and an SVG export flattens the mesh into vector paths that lose the smooth, painterly blend. If the mesh gradient needs to live on a real web component — a hero section, a card background, a landing page surface — the practical approach is to rebuild the look in CSS using layered radial gradients.
What Affinity's Mesh Tool Delivers and What It Cannot Export
The gap between Affinity's mesh gradient and a CSS implementation is the core reason this article exists. The table below maps each capability of the in-app mesh tool to its closest CSS analog inside the generator's output.
| Affinity Mesh Gradient Capability | CSS Equivalent in the Generator Output |
|---|---|
| Multi-color blend across a single shape | Four stacked radial-gradient layers over a base color |
| Color stops at each grid intersection | Each gradient layer's 0% color stop at its focal point |
| Soft falloff toward neighboring regions | The spread value, expressed as a transparent terminal stop |
| Underlying fill | The background-color declaration for the base |
| Editable in the live Affinity file | Editable by re-entering the tool with new hex values |
| Scales with the vector object | Scales with the element's box without an image request |
The biggest difference is fidelity. Affinity's mesh tool lets you place nodes anywhere on a grid; the CSS approach uses four fixed focal positions — 15% 20%, 85% 15%, 20% 85%, and 80% 80%. The CSS output is deliberately constrained so the resulting declarations stay understandable and testable, and so the pasted values remain valid, copy-pasteable CSS rather than a generated blob of syntax. For most web backgrounds — full-bleed heroes, section dividers, card surfaces — that constraint is a feature, not a limitation, because it produces predictable behavior across browsers.
Why Layered CSS Radial Gradients Work as a Substitute
The standard CSS radial-gradient syntax, defined in the W3C CSS Images Level 3 specification and documented on MDN's radial-gradient reference, paints a circle or ellipse that transitions between color stops. By stacking several of these layers on top of a base color, browsers composite them as overlapping translucent shapes, and the eye reads the overlap as a mesh-style blend. Each layer's color starts at full opacity at its center, then fades to transparent at the spread percentage, leaving the base color visible where no layer reaches.
The order of the comma-separated background-image layers matters: the first listed layer sits closest to the viewer and the last sits closest to the base color. The generator emits the four layers in a fixed paint order so the blend is consistent across browsers. A small spread value produces compact color islands with more base color between them; a larger value blends the layers across more of the element and creates softer mixed regions. The control is bounded and integer-only, which is why the output stays easy to reason about in DevTools and easy to review in a design system diff.
Build the CSS Match With the Mesh Gradient Generator
Follow these steps to translate the Affinity mesh gradient you designed into copy-ready CSS.
- Open the Mesh Gradient Generator. The page loads with a live preview and the same six input fields the tool accepts: four mesh colors, one base background color, and one spread value.
- Sample four colors from your Affinity mesh. Pick one color per focal region of your Affinity mesh and enter each one as a six-digit hexadecimal value. The browser color picker emits the same six-digit hex form the tool validates, so colors never need conversion or normalization.
- Set the base background color. Sample the dominant background tone visible in the unblended areas of your Affinity mesh, or choose a neutral that supports the four mesh colors. This color fills the regions where all four layers are transparent and provides the predictable fallback layer.
- Adjust the spread value from 10 to 90 while watching the live preview. A value around 20 produces tight, separated color islands; a value around 70 produces a soft, fully blended mesh. Pick the value that matches the visual feel of the Affinity mesh you are reproducing.
- Copy the complete background declarations. The output panel shows both the background-color rule and the full background-image stack. Select and copy both together. The preview and the output use identical syntax, so what you see in the preview is what your component will paint.
- Paste the declarations into a class, a custom property, a CSS module, or a style sheet. Add background-size, background-repeat, background-attachment, background-clip, or animation rules separately only when the design actually requires them.
Reading the Spread Control and Tuning the Blend
The spread value is the single most consequential control in the tool. It determines the percentage at which each layer's color reaches full transparency. Because the control is bounded between 10 and 90 and accepts integers only, the output never drifts into non-round numbers that are hard to debug in DevTools. The table below summarizes the practical effect of three sample value bands.
| Spread Value | Visual Effect | When It Fits |
|---|---|---|
| 20–30 | Compact color islands with visible base color between them | Reproduces an Affinity mesh where each region reads as a distinct patch |
| 40–60 | Balanced blend, mid-tones appear in the overlap areas | General-purpose hero or card backgrounds with body copy on top |
| 70–90 | Soft, near-uniform mesh with subtle transitions | Atmospheric backdrops where foreground content dominates |
If the rendered blend is too quiet for the design, lower the spread to let the base color and the island colors read more clearly. If the rendered blend is too busy, raise the spread so the layers overlap and the seams disappear. Re-copy the declarations after each change because the output is regenerated from the current input state.
Integrating the CSS Into a Real Component
Once the declarations are copied, drop them onto a real element rather than a placeholder div. The background-image stack paints relative to the element's box, so a 320-pixel mobile card and a 1440-pixel hero display the same four focal points at the same percentage positions. The background scales with the element without adding an image request and without a dependency, which keeps page weight flat and avoids the canvas, SVG, raster, or rendering-library dependency the tool explicitly does not introduce.
For production design systems, move the four mesh colors and the base color into named tokens (for example, --bg-mesh-1 through --bg-mesh-base) and reference those tokens from the declarations. That way, a single token change re-themes the mesh background everywhere it appears, including light and dark variants, without editing each consumer. Document the intended foreground treatment in the same token file: which text color, which link color, and which focus ring color are meant to sit on top of the mesh, and at which component sizes.
Add size, repeat, attachment, clipping, or animation rules separately only when the design actually requires them. The generator's output is intentionally minimal so the consumer component owns those decisions. If you animate position or color, measure the paint cost on representative mobile hardware and honor prefers-reduced-motion.
Testing Before You Ship
Layered CSS gradients are usually lightweight, but the blend varies continuously by position, so the same foreground color can read clearly in one spot and fail contrast in another. Test headings, body copy, links, focus indicators, and controls across the entire background — top, middle, bottom, and at the focal points — not just at the center. Where contrast fails, add a translucent surface layer behind long text or switch that section to a simpler solid background. The tool does not calculate WCAG contrast because the background is not a single color.
CSS gradients can render with small differences across browsers, GPUs, color spaces, screenshots, and exported PDFs, because color interpolation and display profiles both affect the perceived blend. Inspect the actual target environment, not just your local Chrome. Respect forced-colors mode, high-contrast mode, prefers-reduced-motion, and print styles, all of which can collapse or distort a mesh-style background. Add visual regression coverage at the sizes you ship so a token change or a browser update cannot silently shift the blend.
For production design systems, treat the mesh gradient as a static background for normal page sections. Avoid huge offscreen elements and excessive filter effects that increase paint cost. The generator does not upload or save any palette, CSS, preview, or screenshot, and adds no dependency, so the workflow stays local from input to pasted declarations.