How to choose a mesh gradient background
Choose soft colour fields for landing pages and cards, then preview them with your own content.
What is a mesh gradient?
A mesh-style background blends multiple colour fields rather than moving along one straight line. Our CSS mesh designs layer radial gradients to create soft overlaps.
Choose a background for your layout
Large calm areas work well behind headings. Strong highlights work well in illustrations and empty card areas. Open the playground to compare a landing page, cards, a page background and a footer.
Use it in CSS or a design file
Copy CSS to use a browser-rendered design on your website. Download SVG for scalable artwork, or PNG and JPEG for a raster image. Keep informative content as real text rather than baking it into the gradient image.
Try these meet the mesh backgrounds
Open an example to compare palettes and export the background.
