Home › Templates › Mesh gradients
Mesh gradients
Mesh gradients on ProGradients
Updated October 2026
Ocean MeshPale cyan and white melted into a soft mesh, deeper blue in the corners, for social graphics.
Powder MeshAlmost white, with blush and lilac only at the edges, quiet enough for an editorial page.
Signature NoiseSlate blue, mauve, and coral under heavy grain, a bright spot in the middle, for a landing page or a wallpaper.
Amber MeshGold light pooled on dark navy, grain across the field, for a page that wants warmth without leaving black.
Ember BloomBurnt orange around a pale cream streak, grain over the mesh, for a warm hero.
What is a mesh gradient?
Mesh gradients are named ProGradients templates you can open in the browser, copy as CSS, and customize.
Can I use these gradients commercially?
Gradients you create in ProGradients are yours for client and commercial work, subject to the Terms of Service.
How do I add a mesh gradient in CSS?
Open a template on this page, copy the CSS block, and paste that background into a stylesheet or a Tailwind class.
Which export stays free?
CSS, Tailwind, and a marked PNG up to 1920px stay free. 4K, SVG, and batch sizes stay on Pro.
