Skip to main content

Mesh gradient generator

Choose three to five colors and get a soft, multi-point mesh gradient written in plain CSS. Each color is anchored to its own spot on the canvas; the order of the colors decides where each one sits.

  • Color 1 · Mauve

  • Color 2 · Cotton Candy

  • Color 3 · Khaki

  • Color 4 · Pale Turquoise

Tip: paste a list of hex codes anywhere here to check them all at once.

Make a linear gradient instead Open these colors in the Studio

What a CSS mesh gradient is

Design tools draw a mesh gradient as a grid of points, each with its own color, blended smoothly between them. CSS has no mesh primitive, but stacking several radial gradients in one background-image gives the same look. Each layer is one color fading to transparent from its own anchor point: 

radial-gradient(at 10% 0%, #C4B5FD 0, transparent 55%)

The first layer in the list paints on top. Where layers overlap, their soft edges mix, and the result reads as one continuous field of color. Because it is CSS, it is resolution-independent, costs no download, and resizes with its element.

How this generator places colors

Colors go to fixed anchors in order: the top-left, the top-right, the bottom center, then the left and right edges. The first three fade out at 55% of the element and the rest at 50%, so the corners stay distinct and the middle blends. Moving a color in the list moves it on the canvas; “Move the colors around” rotates them through the anchors. Meshes submitted to Tinta are built by this same code, so what you copy here matches what a submission would publish.

Tips for a good mesh

  • Stay close in lightness. Pastels or mid-tones of similar lightness blend into a smooth haze; one very dark color among light ones shows up as a stain.
  • Mind the gaps. Where no layer reaches, the element's own background color shows. The preview uses white; set background-color to a tint of your palette for a richer base.
  • Text goes on a quiet area. A mesh changes color across its surface, so check your heading color against each color it sits over with the contrast checker.
  • Add grain if it bands. Very soft blends can show steps on some screens; a faint noise texture layered on top hides them.

Ready-made meshes

Browse every mesh gradient on Tinta, or the pastel mesh gradients in particular. For a straight blend, use the gradient generator.