Mesh gradient

An ordinary gradient interpolates along one path: a line, a radius, an angle. A mesh gradient interpolates across a surface. You place colours at points on a grid, and every pixel between them is worked out from the points around it, in two directions at once. That is why the result reads as light rather than as a fill. The colours meet in places nobody specified, so the field contains hues that appear nowhere in the palette, and moving one point re-blends a whole region rather than shifting one edge.

The honest note is that CSS has no mesh gradient. There is no mesh-gradient(), and the proposals for one are not shipping anywhere. What people call a mesh gradient on the web is almost always several large radial gradients stacked in one background-image, each fading to transparent, which approximates the effect well enough that most readers never know the difference. The real thing exists elsewhere: Illustrator has had gradient meshes since the nineties, SwiftUI added MeshGradient as a first class type, and the design tool plugins that export “mesh gradients” hand you either a raster image or exactly the stack of radials described above. A shader or a canvas will do a true bilinear mesh if you need one, at the cost of shipping a renderer for a background.

The look is the whole point of aurora UI, and the same craft applies. Keep the points close together on the colour wheel, because four colours from opposite sides of it blend through grey in the middle. Keep the field large and the falloff soft, since a mesh with visible circle edges is just some blurry dots. Expect colour banding: a mesh is mostly shallow transitions over a big area, which is the exact condition bands appear in, so most shipped meshes carry a grain layer for the same reason a grainy gradient does.

Text over one needs care. A mesh has no single background colour, so there is no contrast ratio to quote: the same paragraph can pass over the violet and fail over the pale middle. Either put the text on a solid plate, or constrain the mesh to a lightness range narrow enough that the worst pixel still clears the threshold.