An onboarding background has one job: read as atmosphere, not as content. The screens stacked on top carry headline text, illustrations, and a CTA — the background’s job is to hold them, not compete. The prompts below force low-contrast, negative-space-heavy compositions so the UI layer lands cleanly across light and dark variants. For the production workflow, see the AI app background images tutorial.
TL;DR
- Copy any of the 12 prompts below into your image tool, then drop a black bar with your real headline over the result to test legibility before you ship.
- Keep the busy area in the lower third; reserve the upper two-thirds for headline and illustration.
- One catch most guides miss: Midjourney v7 will not generate
9:20— its tall limit is1:2(as of June 2026). Generate at9:16and extend/crop, or use Gemini’s Nano Banana or GPT Image 2, which accept taller ratios directly. - For consecutive screens, reuse the same seed and only swap the palette so the flow feels like one set.
Which tool to use
The prompts here are model-agnostic — they describe composition, not a specific engine. But the right tool depends on what the background has to do. Current as of June 2026:
| Tool | Best for onboarding backgrounds | Aspect-ratio behavior | Notes |
|---|---|---|---|
| Midjourney v7 | Aesthetic gradients, painterly washes, bokeh | Tall limit is 1:2; --ar 9:20 is rejected | Use --seed to keep a flow consistent; Draft Mode is ~10x cheaper for iteration |
| Google Nano Banana 2 / Pro | Brand-consistent sets, exact palettes, in-image text | 10 aspect ratios, up to 4K; accepts vertical directly | Nano Banana 2 is free to all Gemini users; Pro (Gemini 3 Pro Image) for 4K and tighter control |
| GPT Image 2 (in ChatGPT) | Literal instruction-following, light/dark pairs in one shot | 3:1 to 1:3, native 2K | Available to Plus/Pro/Team; can return up to 8 coherent variants from one prompt |
| Flux 1.1 Pro | Photographic, frosted-glass, texture realism | Standard vertical ratios | Strong commercial-use story; good when you need a real-photo feel, not illustration |
Rule of thumb: reach for Nano Banana when you need an exact hex palette and a matched light/dark set, Midjourney when you want the prettiest gradient, and GPT Image 2 when the prompt has fiddly literal constraints (“two versions side by side”).
Best for
- App onboarding flows where text must stay legible across screens
- Splash screens that fade into the home view
- Empty states that need warmth without distraction
- Animated onboarding backgrounds (export as 1080×2400 stills)
- Light/dark mode pairs for system theme switching
1. Calm Gradient
minimal app background, smooth gradient pale blue to lavender, very low contrast, subtle abstract shapes in lower third, large empty space for UI in upper two thirds, 9:20 mobile aspect2. Soft Geometric
minimal app background, two soft overlapping geometric shapes in lower-right corner, pastel palette, large negative space for UI overlay, blurred edges, 9:20 mobile aspect3. Organic Blob
minimal app background, single soft organic blob shape in lower-left corner, soft pastel peach to cream, lots of negative space for UI, 9:20 mobile aspect4. Aurora Wash
Diffuse color band across the lower half, no detail.
minimal app background, diffuse aurora-like color band stretching across the lower half, gradient teal to soft magenta, heavy blur, no objects, upper two-thirds clean for UI, 9:20 mobile aspect5. Light-Mode and Dark-Mode Pair
Same composition, two palettes, export as a pair. GPT Image 2 handles the “two versions side by side” instruction most reliably.
minimal app background, smooth dual-tone gradient with one soft circle in lower-right. Generate TWO versions side by side: (a) light mode — pale cream to dusty pink palette, (b) dark mode — deep navy to muted purple palette. Same composition, same crop, 9:20 mobile aspect each.6. Bokeh Out-of-Focus
Photographic feel, soft circles of light, fully blurred. Flux 1.1 Pro gives the most convincing photographic bokeh.
minimal app background, fully out-of-focus bokeh photograph, soft circular highlights in warm amber, deep negative space, no recognizable objects, vertical 9:20 phone aspect7. Paper Texture Minimal
Tactile but not busy — recycled paper grain only.
minimal app background, recycled-paper texture, soft warm beige, no graphic elements, very subtle horizontal fold mark across lower third, large empty space for UI, 9:20 mobile aspect8. Abstract Wave Lines
Hand-drawn looking curve, lower portion only.
minimal app background, single thin hand-drawn curving line sweeping across the lower third, soft sage-green palette, off-white field, lots of negative space above the curve for UI, 9:20 mobile aspect9. Frosted Glass Layer
Soft blur over a faint underlying gradient.
minimal app background, frosted-glass blur over a faint pastel gradient, very low contrast, no objects, light bottom-edge gradient suggesting depth, 9:20 mobile aspect10. Mesh Gradient
Modern multi-color mesh, soft and undirected.
minimal app background, soft multi-color mesh gradient blending blush, periwinkle, and pale sage, no objects, heavy blur, even brightness across the frame for UI legibility, 9:20 mobile aspect11. Animated Onboarding Still
Background designed to loop softly under motion. Export the still, then animate the drift in After Effects, Rive, or Lottie.
minimal app background still frame designed to loop in a 4-second motion video, slowly drifting soft particles in the lower third only, deep navy field, large empty negative space in the upper two thirds, 9:20 mobile aspect12. Tablet Variant of the Same Look
Same look, different aspect — keep brand palette identical.
minimal app background, same calm gradient and lower-corner blob composition as a phone onboarding background, re-rendered for tablet at 3:4 aspect, keep palette and corner composition identical, scale negative space to fitHow to refine
The prompts above all say 9:20 because that is the real device target for a modern phone (a 19.5:9 screen is ~9:20 once you strip the rounded corners). But the request and the render are not the same step:
- Midjourney v7 caps portrait at
1:2, so--ar 9:20errors out (as of June 2026). Render at--ar 9:16, then crop the top or use Midjourney’s extend/zoom-out to reach9:20. - Nano Banana and GPT Image 2 accept taller vertical ratios directly, so you can request
9:16or near-9:20in-tool and skip the crop. - For older phones use
9:16; for tablets use3:4(prompt 12).
After rendering, drop a black bar with your real headline text over the background to test legibility before you ship — if it does not read, the model went too busy. Keep the busiest area in the lower third; reserve the upper two-thirds for headline and illustration. For multi-screen flows, regenerate with the same seed (--seed in Midjourney, or “keep the same composition” in Nano Banana) and only swap the palette so consecutive screens feel related.
One concrete legibility target: WCAG AA needs a 4.5:1 contrast ratio for body text and 3:1 for large headline text. If your headline sits over the background directly (no scrim), keep the background luminance in the headline zone within a narrow band so that ratio holds in both light and dark variants.
Common mistakes
- Too busy — texture or pattern competes with UI text and the headline becomes unreadable
- High contrast under the headline area; always reserve the upper third for the UI layer
- Color palette that fights the brand instead of supporting it
- Single design rendered at one ratio; export phone, tablet, and dark-mode variants together
- Asking Midjourney for
9:20and getting an error instead of an image — render9:16and crop - Forgetting the headline-legibility check — looks pretty alone, fails the moment text is on it
FAQ
Why do the prompts say 9:20 if Midjourney can’t render it?
9:20 is the real on-device target for a modern 19.5:9 phone, so it belongs in the brief. Midjourney v7 caps portrait at 1:2, so render at 9:16 there and crop down. Nano Banana and GPT Image 2 accept taller ratios in-tool, so you can request 9:16–9:20 directly with them.
Which tool gives the cleanest light/dark pair? GPT Image 2 follows the literal “two versions side by side, same composition” instruction most reliably, and Nano Banana is best when you need the exact same hex palette swapped between modes. Prompt 5 is written for either.
Do I need a paid plan? Nano Banana 2 is free to all Gemini users as of June 2026. GPT Image 2 in ChatGPT needs Plus, Pro, or Team. Midjourney is subscription-only, but its Draft Mode is roughly 10x cheaper per image for iteration.
How do I keep five onboarding screens feeling like one set?
Lock the seed and the composition, then change only the palette or accent position per screen. In Midjourney pass the same --seed; in Nano Banana, generate the first frame, then ask it to “keep the same composition and lighting, change the palette to…”.
Can I animate these for an onboarding loop? Yes — that is what prompt 11 is for. Render the still, then drive a slow drift in Rive or Lottie (lightweight, ships inside the app bundle) or After Effects for a pre-rendered loop. Keep motion under ~4 seconds and confined to the lower third.
Related
- App background image prompts — broader app background library
- App splash screen prompts — sibling structure for splash visuals
- AI app background images — production workflow for app backgrounds
- AI image aspect ratio guide — ratios for app surfaces
- AI App Background Image Prompt: Generate Clean Splash, Login, and Empty-State Art
Tags: #App background