Mesh Gradient Generator: App Background How-To

Use a mesh gradient generator or layer 3–5 overlapping radial gradients, placing each colour point around—not behind—the onboarding or paywall headline. Start with one dark or neutral base, then add three or four low-contrast colour blobs with transparent edges. Export a static iOS asset at @3x when the background does not move; use SwiftUI MeshGradient or an equivalent live shader only when motion or runtime theming justifies the GPU and battery cost. Check final text against the composited background at WCAG 2.2 AA’s 4.5:1 body-text contrast threshold.

Key takeaways

• •Build a mesh gradient from 3–5 overlapping radial colour points, not one linear gradient.
• •Reserve the headline zone before placing colour points; WCAG 2.2 AA requires 4.5:1 for normal text.
• •Export a static iOS background at 3× its point size, such as 1179 × 2556 px for 393 × 852 pt.
• •SwiftUI provides MeshGradient; CSS can approximate the effect with layered radial-gradient() functions.
• •A static raster avoids continuous shader work; animated live gradients require GPU and battery profiling.

This guide is for mobile UI/UX designers, iOS engineers, and Android engineers who can export screen assets and implement a screen background.

Time: 25 minutes · You'll need: A canvas-based image editor with radial gradients and layers, An iPhone screen frame or the target Android device pixel dimensions, A contrast checker that samples the final composited screen, Xcode for SwiftUI implementation, if exporting native code, floow.design Mesh Gradient Generator, optional: /free-tools/mesh-gradient-generator

What's on this page

1. •Map the headline-safe area first
2. •Place three to five radial colour points
3. •Blend the aurora background without banding
4. •Choose a raster or live implementation
5. •Implement the native and CSS equivalents
6. •Reference table

• •Common mistakes
• •FAQs

Creating a mesh gradient background, step by step

1. Map the headline-safe area first

Draw the onboarding or paywall screen at its target size before adding colour. On an iPhone layout using a 393 × 852 pt artboard, reserve the upper 35–40% as the first headline test area, or reserve the exact zone occupied by your title, supporting copy, and close button. Put the brightest intersections and the strongest hue changes outside that zone—usually in the lower corners and side edges.

Add the actual headline in its production weight and size, not placeholder text. Test contrast against the final blended pixels beneath every line. WCAG 2.2 AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. A dark scrim behind a title is valid when the art direction needs bright colour near the top; moving the colour points is usually cleaner. The result should have one calm reading surface and visible colour activity elsewhere.

Tip: Do not judge readability from the base colour; translucent radial layers can create a much lighter overlap directly under text.

2. Place three to five radial colour points

Set a neutral or very dark base fill, then create 3–5 large radial gradients on separate layers. Each layer needs a saturated centre that fades to full transparency at its outer edge. Place one colour point partly off-canvas, one in a lower corner, and one along an opposite side; use a fourth or fifth only when the screen still has distinct quiet space.

Treat each radial layer as a gradient blob background, not as a visible circle. Scale its transparent edge beyond the canvas so no hard boundary appears. Keep adjacent centres separated by roughly one-third of the canvas width as a starting arrangement, then change their size before adding another hue. More than five independently coloured points often produces grey or brown overlap, particularly when complementary hues meet at similar opacity. If the result looks muddy, remove a point or reduce its opacity rather than increasing saturation.

Tip: Repeat one hue family in two locations before introducing a fifth unrelated colour; repetition makes the composition read as light rather than confetti.

3. Blend the aurora background without banding

Lower each colour layer until the base remains visible through every overlap. Start around 20–40% opacity for a bright blob over a dark base, then adjust from the final device preview rather than the editor’s white canvas. Use broad falloff: the coloured centre should occupy less than half of the visible blob, with the remaining area fading gradually to transparent.

Avoid one linear ramp from the top of the screen to the bottom. A mesh gradient design gets its depth from multiple local light sources: radial fields overlap, their edges mix, and the base anchors the result. If an editor exposes a noise or dither control, apply subtle noise only after the gradient is composed and inspect it at 100% scale. A visible stripe across a flat region is banding, not an intentional aurora effect. Keep noise out of text zones because it can reduce perceived glyph sharpness.

Tip: When two blobs create a dirty centre, move one centre off-screen instead of trying to correct the overlap with a third colour.

4. Choose a raster or live implementation

Export a static image when the background has no motion and does not respond to user input. For iOS, make the raster @3x: multiply the target point dimensions by 3. A 393 × 852 pt screen therefore needs a 1179 × 2556 px source image. Supply Android assets at the physical pixel size or density-specific resource size required by the devices you support; do not treat iOS @3x as an Android density rule.

A static raster is decoded and drawn as an image, so it avoids continuous shader work from an animated gradient. A live gradient can be the right choice for animated colour drift, dynamic themes, or resizing, but profile it on target devices: repeated animation and redraws use GPU time and can increase battery use. Keep a live background still when the screen is idle. For a manual, no-code export route, the free Mesh Gradient Generator at /free-tools/mesh-gradient-generator can output a phone-sized image; the radial-layer method above produces the same basic structure without it.

Tip: For a paywall that may stay open for minutes, a static raster is normally the better default unless animation is part of the product’s visual identity.

5. Implement the native and CSS equivalents

On iOS 18 and later, use SwiftUI’s named MeshGradient type when you need a live mesh. A minimal four-node mesh uses a 2 × 2 grid with four positions and four colours:

MeshGradient(
  width: 2, height: 2,
  points: [SIMD2(0, 0), SIMD2(1, 0),
           SIMD2(0, 1), SIMD2(1, 1)],
  colors: [.indigo, .purple, .blue, .cyan]
)

Keep the same 3–5 hue families used in the design; a mesh can contain more control nodes without requiring more unrelated colours. For a CSS multi-radial equivalent—useful for a web-based prototype or a WebView—stack radial gradients over a base: radial-gradient(circle at 15% 80%, #7C4DFF 0%, transparent 48%), radial-gradient(circle at 90% 30%, #00C2FF 0%, transparent 45%), #10111A. CSS is not an Android native rendering API; ship the raster or a native shader implementation in an Android app.

Tip: Match point locations between the design and code first; matching hex values cannot rescue a different spatial composition.

Reference table

Mesh gradient production limits

Do it with the free Mesh Gradient Generator

Generate soft multi-point mesh gradients and export them as CSS, native code or a phone-sized image.

Open the Mesh Gradient Generator → — free, no sign-up.

Common mistakes

Using one diagonal linear gradient and calling it a mesh.

Layer 3–5 radial gradients with transparent outer edges over a base colour. Local colour centres create the multi-point structure.

Placing the brightest overlap behind the paywall price or headline.

Reserve the text zone first and move blob centres to corners or edges. Verify the composited text colour reaches 4.5:1 for normal text.

Exporting a 393 × 852 px image for a 393 × 852 pt iPhone layout.

Export the iOS image at @3x: 1179 × 2556 px. The point-sized file will be soft when scaled on a 3× display.

Animating a live gradient by default on a static onboarding screen.

Use a raster for a non-interactive background. Keep live animation for a deliberate product effect and profile GPU and battery use on target hardware.

Frequently asked questions

What is the easiest way to make a mesh gradient background?

The easiest method is to overlap three or four large radial gradients with transparent edges over one base colour. Put each colour centre at a corner, side, or partly outside the phone canvas, then keep the headline area relatively plain. A mesh gradient generator can speed up placement, but separate radial layers produce the same core effect manually.

How many colours should a mesh gradient design use?

Use three to five colour points in a mesh gradient design before adding colours is more likely to create muddy overlap than useful depth. Reuse related blue, violet, or pink hues when you need more visual coverage. Reduce a blob’s opacity or move it off-canvas before introducing another unrelated hue.

Can I make an aurora background with SwiftUI MeshGradient?

Yes, SwiftUI MeshGradient can create an aurora background by interpolating colours across a grid of positioned control points. Start with a 2 × 2 mesh and four related colours, then keep high-contrast transitions away from text. MeshGradient is available on iOS 18 and later, so provide a raster fallback when supporting earlier iOS versions.

Should a gradient blob background be a PNG or rendered live?

Use a raster image for a static gradient blob background, and render it live only when it needs animation, dynamic colour, or responsive point movement. An iOS raster should be exported at @3x of the target point dimensions. Live rendering can consume additional GPU and battery resources when it animates or redraws frequently.

Where this leaves you

A useful app mesh is not a rainbow fill. It is a controlled set of three to five radial light sources, arranged around a quiet text surface. The raster-versus-live decision follows the product behaviour: export a @3x image for a still onboarding or paywall screen, and use MeshGradient only where live colour has a visible job. Keep the CSS version as a prototype or WebView equivalent, not as an Android-native shortcut. Your next action is to place the production headline on the finished backdrop and test every line against the 4.5:1 WCAG 2.2 AA threshold before exporting it.

---

Design the screens first

Describe the screen you need in plain English and floow.design generates production-ready iOS and Android layouts you can iterate on by chat, then export to Figma or code. Design your mobile app screens in floow.design first, then build.

Start designing free →

---

Related

• •Flexbox Generator — Build a flex layout visually, then export it as CSS, Tailwind, SwiftUI, Compose, React Native or Flutter.
• •CSS Grid Generator — Lay out rows, columns and gaps visually, then export as CSS, Tailwind, LazyVGrid, Compose or Flutter.
• •Grid Generator CSS: App Screen Layout Guide — Use a grid generator CSS workflow to build mobile gallery and dashboard layouts that reflo
• •Box Shadow Generator: Mobile Elevation Guide — Use a box shadow generator to build a mobile elevation scale with Material dp levels, tint
• •Gemini 3.1 for Mobile App UI Design: 4 Real Prompts Tested Hands-On (2026) — I tested Gemini 3.1 Pro with 4 real mobile app UI prompts — fitness tracker, food delivery

Sources

• •Apple Developer Documentation: MeshGradient
• •W3C: WCAG 2.2 Contrast (Minimum)
• •Android Developers: Drawable resources