How to Create a CSS Mesh Gradient (2026)

Why Mesh Gradients Are Everywhere

The aesthetic lineage is easy to trace. In the late 2010s, dominant landing-page design was flat — solid brand color, maybe a subtle two-stop gradient on a button. Around 2020, Stripe refreshed with a soft, slowly-animated, multi-hue backdrop, and within eighteen months, everyone shipping a developer tool or a design product had a variant of the same look. By 2024 the convention had calcified: hero section gets a mesh gradient, section below is solid, cards float on top with a tiny shadow, typography is a display serif or a geometric sans. By 2026, the mesh backdrop is so ubiquitous that a plain solid-color hero reads as deliberate minimalism rather than absence.

There are reasons the look stuck. First, mesh gradients are rich without being loud — they give a page visual depth without distracting from the content. Text on a soft mesh still reads as the primary thing; text on a hero photo fights with the photo. Second, they’re tonally flexible: the same technique can read as calm (pale blues and greens), energetic (bright cyan and magenta), warm (sunset oranges and reds), or moody (deep navy and purple) with no structural change to the page. Third, and most practically: they require no photography. A design team shipping a product page can pick a gradient that matches their brand palette and ship in an afternoon, without hiring a photographer or licensing stock.

The fourth reason, which is more interesting: mesh gradients feel native to the screen. Unlike photography, which came from optical cameras and carries that physical provenance, a mesh gradient is a digital-first image — it could only exist on a lit screen. That makes it feel correct for software, in a way that a photo of a forest on a SaaS landing page would not.

How CSS Mesh Actually Works

There’s no native mesh-gradient primitive in CSS. Illustrator has mesh gradients that interpolate color across a quadrilateral patch network; CSS has linear-gradient and radial-gradient and conic-gradient, and that’s it. The convention that took over is: stack several radial gradients on top of each other, make the outer stops transparent, and let the browser composite them. That’s it. That’s the whole trick.

background-color: #0B1220;
background-image:
  radial-gradient(at 15% 20%, rgba(0,255,209,0.85) 0px, transparent 55%),
  radial-gradient(at 80% 15%, rgba(0,119,204,0.75) 0px, transparent 60%),
  radial-gradient(at 70% 85%, rgba(192,132,252,0.65) 0px, transparent 65%);

Reading that top to bottom: the element gets a dark navy base color. Then three radial gradients are layered on top, each anchored to a different spot (percentages are relative to the element’s box), each transitioning from a semi-transparent color at the center to fully transparent at a percentage distance outward. Because the colors are semi-transparent, they blend with whatever’s beneath them — the base color for edges, other points’ color fields where they overlap. The result is the soft, organic, multi-tonal surface that reads as a mesh.

A few mechanical notes. First, the order in the background-image list matters — the first gradient in the list paints on top, the last on the bottom. For a mesh this rarely matters visibly because all the gradients are semi-transparent, but if you’re debugging a point that seems to disappear, check the stacking order. Second, you can further tune the blending between layers with the background-blend-mode property — screen brightens where colors overlap (good on dark bases), multiply darkens (good on light bases), soft-light is the middle path. Third, the percentages in at X% Y% scale with the element, so a mesh built in a 1200×600 hero still looks correct on a 375×600 mobile viewport — the points are anchored proportionally.

Building One From Scratch

Here’s how to build a mesh gradient intentionally, without a tool, if you ever need to explain it or tweak an existing one by hand. Start by picking a base color. Mesh gradients read as the tone of their darkest point — a navy base reads as a “dark” mesh even if the overlaid colors are bright, and a cream base reads as a “light” mesh even with saturated overlays. Choose the base first; it sets the mood.

Next, pick three analogous or complementary colors. “Analogous” means neighbors on the color wheel — teal, blue, cyan — which produces calm, cohesive meshes. “Complementary” means opposites — blue plus orange, teal plus coral — which produces energetic, higher-contrast meshes. Avoid picking three colors with equal saturation and brightness; vary their lightness a bit so the mesh has internal depth rather than reading as a single blurred pool.

Place the points. Three points work best when they form a loose triangle, not a line — one near a top corner, one near the opposite top corner, one along the bottom edge. This spreads the color fields across the composition. A common mistake is placing all three points near the center, which produces a muddy, undifferentiated blob; another is placing them in a horizontal row, which produces a striped effect that reads as a regular gradient, not a mesh.

Tune the spread and alpha. Spread controls how far each point’s color reaches before fading to transparent — 50% is a reasonable default, more creates broader color fields, less creates sharper “bubbles” of color. Alpha controls how intense each point is — 0.7–0.85 is the sweet spot for most meshes; below 0.5 the color barely registers, above 0.9 the mesh loses its soft quality and starts to look like a cartoon. Iterate until the composition feels balanced — no single point should dominate unless you specifically want that.

How Many Points (and Where to Put Them)

Three is the sweet spot. One point is a radial gradient. Two points is a bi-tonal ombre, which is a gradient, not a mesh. Three points is where the effect becomes identifiably “mesh” — three color fields that overlap in the middle create visible tri-point blending, which is the signature feature of the aesthetic. Four or five points is good for slightly more complex compositions, especially when you have a brand palette with more than three colors you want to represent. Six or more points almost always looks worse than four; the color fields start to overlap so much that the composition reads as a muddy blur rather than distinct points.

Placement matters more than count. A rule of thumb: if you cropped the mesh into thirds horizontally and thirds vertically, you’d want at least one point in the top half and at least one in the bottom half, so the mesh has vertical interest. You’d want the points well-distributed horizontally, not clumped on one side. You’d want at least one point near an edge or corner, so the mesh has asymmetry — a perfectly centered mesh with points at 25/75 mirror positions reads as a static wallpaper, not a designed backdrop.

One advanced move: deliberately place a point off-canvas, at a position like 110%/30% or -10%/80%. This means the point’s center is outside the visible area, but its color field bleeds in from the edge — producing a nice “color washing in from offscreen” feel without a visible anchor. This technique is common in SaaS hero sections because it makes the mesh feel like it extends beyond the viewport rather than terminating at the section edge.

Choosing a Blend Mode

The background-blend-mode property changes how the stacked gradients combine. It’s one line of CSS and it completely changes the vibe. The main options worth trying are normal, screen, multiply, overlay, soft-light, and hard-light.

The short decision tree: on a dark base (black, navy, deep purple), use screen — it makes overlapping colors brighter where they meet, which is what you want when the base is swallowing light. On a light base (cream, pale gray, white), use multiply — it makes overlapping colors darker where they meet, which creates the watercolor-on-paper look that reads as “elegant” on a light site. Overlay is aggressive and tends to clip colors; use it when you want saturation cranked up and you’re OK with harsh transitions. Soft-light is a gentle version of overlay — it’s the safest choice when you’re unsure. Normal turns off blending entirely and is sometimes exactly what you want for crisp, poster-style meshes where each color stays distinct.

The mistake to avoid: picking a blend mode that fights your base. Multiply on a black base produces nothing — multiply with zero is zero. Screen on a white base produces a washed-out blur because screen with max light is just max light. Match the mode to the base, and the mesh comes to life with essentially no other tuning.

Shipping It to Production

Mesh gradients are one of the rare CSS techniques where the performance story is genuinely free. The CSS is a few hundred bytes, which is negligible compared to even a small hero image. The browser renders gradients on the GPU with hardware acceleration; an eight-layer mesh renders in well under a millisecond even on mobile. Unlike a background image, there’s no network request, no Largest Contentful Paint penalty, no resolution-independence problem on high-DPI screens. For a static mesh in a hero section, performance is a non-issue.

Accessibility notes. First, the mesh is purely decorative — it’s not announced to screen readers, which is correct. Second, if you’re placing text on top of a mesh, check the contrast. Mesh gradients vary in brightness across the surface, so a text color that hits 4.5:1 against the dark corner might fail against the bright corner. The fix is either to darken the mesh with an overlay (a semi-transparent black layer on top of the mesh, below the text) or to add a subtle drop-shadow to the text (rarely the right call but sometimes necessary). Third, avoid animating the mesh if a user has prefers-reduced-motion enabled — slowly-shifting gradients can trigger motion sensitivity. Wrap any animation in a media query.

Animation itself is worth a paragraph. The trick is to animate CSS custom properties that drive the gradient positions, not the background-image string directly — the string is not interpolatable, so transitioning between two mesh values produces a flicker. Declare each point’s position as a variable, use those variables in the gradient string, and animate the variables. This pattern requires the @property at-rule to declare the variables as percentages so they interpolate smoothly, which is supported everywhere modern as of 2024. Keep the animation slow (15–30 seconds per cycle) — fast animation of a mesh reads as amateurish; slow animation reads as ambient.

One common failure mode: stacking mesh gradients in parent and child elements. If a section has a mesh background and a child div also has one, the child will appear on top of the parent — but unless you’ve set appropriate opacity or blend, the child’s mesh will obscure rather than blend with the parent’s. For nested meshes, use mix-blend-mode on the child (which blends it against the parent’s stacking context), not background-blend-mode (which only blends the child’s own layers). Most of the time, though, you only want one mesh per section — don’t compound them.

The 60-Second Workflow

Step 1 — Pick a preset. Open the Gradient Mesh Generator, scroll through the twelve presets, and pick the one closest to the mood you want. Presets are a much faster starting point than building from scratch, because good mesh aesthetics depend on color theory judgments that are hard to eyeball.

Step 2 — Drag the points. Click and drag any of the colored dots on the canvas to reposition them. Watch how the mesh changes — moving a point toward a corner creates negative space elsewhere; moving two points closer together intensifies their blended hue in the middle.

Step 3 — Swap colors toward your brand. Click a point’s swatch in the controls and pick your brand primary. Do the same for a secondary and accent color. The mesh will re-tint automatically. Most brand palettes work — vibrant palettes become vibrant meshes, muted palettes become muted meshes.

Step 4 — Tune the base color. The base sets the mood. A dark base (#0B0D17 or similar) gives you a dark, moody mesh; a light base (#FAF7F2) gives you a soft, airy mesh. Experiment — the same three points can read completely differently depending on what’s underneath them.

Step 5 — Pick a blend mode. Screen for dark bases, multiply for light bases, soft-light when you’re unsure. Cycle through the options and watch the mesh respond; stop when it looks best.

Step 6 — Optional: toggle grain. The generator has a checkbox that overlays a subtle film-grain texture via SVG turbulence. Adds a tactile, analog quality that elevates the mesh from “generic modern SaaS” to “considered brand piece.” Use sparingly — too much grain reads as 1990s-retro.

Step 7 — Copy the CSS. Click “Copy Full CSS Rule” and paste into your stylesheet on the element you want to color. Reload; you’re done. No image upload, no asset pipeline, no loading state, no Lighthouse penalty. The mesh is just CSS — which means it’s editable in DevTools, A/B-testable without redeploying assets, and future-proof in a way image-based mesh backdrops never will be.