Gradient Mesh
Gradient mesh is the oversized blurred radial gradient that designers drop into the hero section of every new SaaS homepage between 2023 and 2026. It runs a specific palette from coral at the center through violet and out to cyan edges all heavily blurred to create a soft atmospheric glow against a dark slate or near black background. The mesh adds perceived depth and a sense of futuristic polish without requiring actual illustration work or photography. You build it in Figma by layering multiple radial gradients with carefully placed color stops then adjust the blur until the transitions feel organic. Export it as a background image or recreate it in CSS using multiple background declarations with radial gradient functions. The final effect sits at low opacity behind the main headline which is usually set in a bold sans font with a single monospace word slipped in for that builder cred. It became one of the five tells of the SaaS monoculture because it spread so effectively from a handful of original users to the entire industry.
A gradient mesh is not noisy grain. It is not the faint dot pattern or hairline grid that often layers on top of it for added texture. It is not a simple linear gradient or a hard edged color block. It is not an original brand move in 2026. It is not what gives your product a lasting visual identity. It is not the hero element that makes users remember your name after they browse five similar sites in a row. It is not a shortcut to taste. The moment it became the default output from every AI design tool trained on the top one hundred SaaS sites it stopped signaling premium quality and started signaling that you lacked a point of view.
Concrete example. Stripe planted the seeds with their glowing gradient orbs in marketing materials as early as 2019. Linear crystallized the formula in their landmark 2022 homepage that paired the coral to violet to cyan mesh with crisp typography and generous white space. The combination looked so confident that it instantly became the reference for what a serious modern B2B tool should look like. Vercel iterated on it in 2023 adding their signature geometric grain on top of a similar mesh. Resend copied the exact color stops for their transactional email product launch in 2024. Loops followed suit. Cal.com embraced it during their pivot toward community. Posthog ditched their previous colorful style for the dark mesh treatment in their 2025 rebrand. Cursor the AI powered code editor launched with a prominent version. Raycast did the same. The majority of companies in the 2025 and 2026 Y Combinator batches shipped homepages with some variation of the mesh. AI tools made it worse. Ask v0 or Bolt to design a landing page and the hero contains the telltale coral violet glow because those models were trained on the homogenized web full of Linear copies. Even unrelated products like no code database tools and AI writing assistants adopted it creating a sea of identical first impressions across categories that should have looked nothing alike.
Use gradient mesh when you are the first or second mover in a new category and you need to borrow instant credibility from the Linear Stripe aesthetic. It worked for Linear because their product actually delivered on the precision and care that the design promised. Consider it if your audience is exclusively technical founders and developers who see the mesh as a badge of membership in the in group. But do not use it if you are the tenth company in your space. Do not use it if your customers include non technical people who might find the dark futuristic look intimidating rather than inviting. Do not use it if you plan to build a brand that stands out in memory or screenshots. The companies that avoided the mesh entirely provide the roadmap. Notion chose a light cream background with hand sketched illustrations that felt warm and human. Figma went with bright primary colors and interactive elements that reflected the spirit of collaboration. Anthropic crafted a visual language of careful typography and subtle warmth that matched their careful approach to AI. These brands understood that visual identity compounds over time while templates get rented until they lose all meaning. Run your homepage through the identity audit. If a stranger could swap your site with one of your competitors and you would not notice for several minutes then the gradient mesh is not helping you. It is hiding you inside someone else's brand. Replace it with choices that come from your own product values and audience instead of from the last Twitter trend.
Gradient mesh does not make you Stripe. It makes you the 49th company that also wanted to be Stripe.
Read the full guide
Related terms
Keep exploring
Linear Aesthetic
The dark, confident visual language Linear popularized around 2022 that became the default template for ambitious SaaS marketing by 2025.
Noisy Gradient
A noisy gradient layers subtle film grain or procedural static over a smooth OKLCH color transition to kill banding, add tactile depth, and create premium texture that ships in under 4kb and paints instantly.
Hero Section
The hero section is the first full-width content block on a page, built to tell a visitor where they are, what they can get, and what to do next before they decide to scroll or bail.
Visual Identity
The visible elements of a brand: logo, color palette, typography, imagery style, and layout patterns.