Mesh Gradients in CSS: A Modern Design Trend
Mesh gradients have taken over product landing pages, mobile app design, and SaaS marketing sites. Unlike standard linear or radial gradients that flow predictably in one direction, mesh gradients create an organic, almost three-dimensional color field — soft blobs of color blending into each other like ink dropped in water. In this article you will learn what mesh gradients are, how they differ from standard CSS gradients, and how to approximate or replicate them using layered radial gradients and modern CSS techniques.
What Is a Mesh Gradient?
A mesh gradient is a color effect where multiple color sources are placed at different positions on a canvas and blended together without hard edges, creating a soft, multi-directional color field. The term comes from Figma and Adobe Illustrator's mesh gradient tools, where you define a grid of control points, each with its own color, and the rendering engine interpolates between them smoothly. In traditional CSS, there is no `mesh-gradient()` function. What you see branded as a 'mesh gradient' on websites is almost always achieved through one of two methods: (1) multiple layered radial gradients with transparent edges, or (2) a pre-rendered PNG or SVG export from a dedicated mesh gradient tool. The visual signature of a mesh gradient is the absence of any clear directional flow. Standard gradients always have a dominant direction — even a radial gradient has a clear center. A mesh gradient has at least three color sources positioned asymmetrically, and the blending between them creates an ambiguous, organic depth that changes character depending on the viewer's angle and monitor calibration. This organic quality is precisely why mesh gradients dominated design in 2024-2026: they push back against the mathematical precision of flat design, adding a tactile, almost physical quality to digital interfaces. Designers describe them as 'feeling like soft velvet' or 'like a color-lit fog' — sensations entirely absent from flat or material design systems.
Building a Mesh Gradient with Layered Radial Gradients
The most faithful CSS-only approximation of a mesh gradient stacks multiple radial gradients, each fading to `transparent`, on the same element. Because gradients composite in order, the colors blend together wherever they overlap, creating the characteristic soft blending of a true mesh. Here is a four-source mesh effect: ``` .mesh-bg { background-color: #0a0a2e; background-image: radial-gradient(ellipse at 20% 20%, rgba(102, 126, 234, 0.7) 0%, transparent 55%), radial-gradient(ellipse at 80% 10%, rgba(240, 147, 251, 0.6) 0%, transparent 50%), radial-gradient(ellipse at 10% 80%, rgba(79, 209, 197, 0.6) 0%, transparent 50%), radial-gradient(ellipse at 85% 80%, rgba(245, 87, 108, 0.5) 0%, transparent 55%); } ``` The `background-color` acts as the base. Each radial gradient has a semi-transparent color at the center fading to fully transparent at the edges. Because transparency composites additively, areas where two blobs overlap show a mix of both colors. The key design variables are: (1) the `at x% y%` position — spread your sources asymmetrically for the most natural look, avoid perfectly symmetric layouts; (2) the opacity values in `rgba()` — lower opacity creates subtler blends, higher opacity creates stronger color saturation; (3) the size of the transparent stop — smaller values create tighter, more focused blobs, larger values create a diffuse wash. For best results, use a CSS gradient generator to design each radial blob individually, then combine the gradient strings manually in your stylesheet.
Mesh Gradients via SVG and PNG Exports
The layered radial gradient technique produces a good mesh approximation, but dedicated mesh gradient generators — including features available in advanced CSS gradient tools — produce richer, more accurate mesh effects by using true grid-based interpolation before exporting the result as a static asset. The workflow is: design your mesh gradient in a specialized tool, export as SVG or PNG, then reference it as a `background-image` in your CSS. The tradeoff is file size (even a compressed PNG for a 1440px-wide hero can be 100-500KB) versus visual quality (true mesh gradients have a smoothness that pure CSS radial layering cannot fully replicate). SVG is the better choice when possible. An SVG mesh gradient exported from a tool like Figma or a dedicated mesh generator can be as small as 5-15KB because the file encodes the gradient mathematical description rather than pixel data. Inline the SVG directly in your HTML or reference it as a `background-image: url('mesh.svg')` for instant loading. PNG is appropriate when the mesh is very complex (many control points with fine detail) or when you need it to work as an email background. Use a PNG export at the exact maximum display width needed (typically 1440px or 1920px) and run it through an image compressor. A well-compressed WebP version of a mesh gradient PNG often achieves 80-90% size reduction without visible quality loss. For static sites where you control the build process, generating the mesh gradient at build time and embedding it as a base64-encoded inline SVG eliminates the HTTP request entirely, which marginally improves LCP scores in Google's Core Web Vitals.
When to Use Mesh Gradients and Design Tips
Mesh gradients are visually powerful but should be used with restraint. Here are the situations where they genuinely elevate a design and the pitfalls to avoid. Best use cases: full-page hero backgrounds for creative agencies, SaaS product landing pages, mobile app onboarding screens, and luxury or premium product showcase pages. Mesh gradients signal sophistication and modernity and work well when the brand wants to project creativity, innovation, or premium positioning. Avoid mesh gradients as backgrounds when: the page has dense body text (the variable luminosity makes text contrast impossible to ensure across the whole element), the audience is predominantly on low-end devices (complex radial gradient stacks are more GPU-intensive than simple linear gradients), or the brand identity is centered on clarity and simplicity (mesh backgrounds compete for attention and can undermine minimalist aesthetics). Design tip: limit your mesh to three or four colors drawn from your brand palette. Using off-brand colors in a mesh because they blend nicely creates visual inconsistency across the broader site. Generate each color in the CSS gradient generator using exact brand hex values, then adjust opacity to control blending intensity. Design tip: always add a subtle noise texture on top of the mesh using an SVG filter or a semi-transparent PNG noise overlay. A mesh gradient without texture can look overly digital and glassy. A fine grain (2-5% opacity) adds a tactile warmth that makes the gradient feel more premium. This is the technique used by Stripe, Linear, and other design-forward SaaS products in their hero sections. Design tip: generate your mesh at the CSS level first using layered radial gradients, verify the concept works, then invest time in a full SVG/PNG export only if you need higher fidelity. This iterative approach saves time and keeps the design flexible during early prototyping.
Frequently Asked Questions
- Is there a pure CSS mesh-gradient() function?
- As of 2026, there is no native `mesh-gradient()` CSS function in any browser. The CSS Images Level 4 specification discusses gradient mesh as a potential future addition, but it has not been formally specified or implemented. All current mesh gradient effects in CSS are achieved through layered radial gradients, SVG export, or canvas-rendered images. Follow the CSS working group drafts for updates on this feature.
- Do mesh gradients impact page performance?
- Layered radial gradients in CSS are moderately more GPU-intensive than a single linear gradient, but on any device from the past five years the performance impact is negligible for static (non-animated) mesh backgrounds. Animated mesh gradients — where blob positions change over time — are significantly more demanding and should be profiled carefully. PNG or SVG exported mesh backgrounds trade CPU/GPU cost for initial load time, which is usually the better tradeoff for hero sections.
- What tools are best for generating mesh gradients?
- For quick CSS-based mesh effects, the CSS Gradient Generator tool supports layered radial gradients you can combine manually. For full mesh gradient generation with true grid interpolation, dedicated tools like mesh.style, Mesher by CSS Hero, and Figma's mesh gradient plugin produce higher-fidelity results exportable as SVG or PNG. For production sites, combining a CSS approximation during prototyping with a final SVG export is the recommended workflow.