Splash screen design: the first second of your app

Splash screen design is the first second of your app, and it is a handoff, not a poster. The system paints one flat colour and, on Android, your icon. The gradient appears on the first real screen with that same colour in the centre, so the swap is invisible.

What the first second is for

Before your code draws, the platform can paint a flat colour, and on Android the icon. Your gradient starts on the first frame you control. That is the only layer where the brand ground can fill the screen.

What each platform will actually paint

iPhone and iPad: look like the first screen

The launch screen appears at once and should match the first screen: same orientation, same light or dark look. A solid first moment means a solid launch screen. No text, because it cannot be translated, and no logo unless it already sits on the first screen.

Android 12 and later: icon, colour, short motion

Android 12 draws the splash on a cold start and a warm start, not when someone switches back to an app that is still open. Set one opaque colour and a vector icon.

• Window background. One opaque colour for day and one for night. No transparency, gradient or photo. A plain theme colour is used if you set nothing else.
• Icon. A vector, still or animated. The launcher icon is the default, so splash and home screen share one artwork.
• The crop. The outer third is masked. With a colour behind the icon, draw 240 dp inside a circle 160 dp across. Without it, draw 288 dp inside a circle 192 dp across.
• Animated icon. An animated vector, not a video, on a 432 dp canvas with the inner 288 dp visible. Stay at or under 1,000 milliseconds. A delayed start cannot exceed 166 milliseconds. If launch takes longer, loop a short motion that still looks finished when cut off.
• Not a timer. The duration does not hold the splash open. It leaves when the first frame draws. A circle of colour behind the icon is optional, and only for contrast.
• No bottom logo. A branding image of 200 by 80 dp is allowed under the icon. The design guidance says not to use it.

Installed web apps: background_color

`background_color` is the window colour before CSS loads. On Android an installed site builds its splash from that colour, theme_color and the icon, as the web app manifest guide describes. Use one opaque hex, the same as the page background-color, not a gradient. Set both schemes in CSS: a browser may override the manifest colour for prefers-color-scheme. Safari on iPhone does not take its splash from this field, so the page background still has to match.

{
  "name": "Orchard",
  "short_name": "Orchard",
  "display": "standalone",
  "background_color": "#12211e",
  "theme_color": "#12211e",
  "icons": [
    {
      "src": "/icons/orchard-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

A gradient that does not flash

An app splash screen gradient is safe when the system never paints it. Sample the hex behind the icon. That handoff colour goes in every system slot. Keep a wide flat centre of the same hex, wider than the icon, and let the second colour arrive only at the edges or along the bottom.

A blend through the middle makes the circle pop: the system never showed that colour. Sample a gradient icon's centre too. Build it as an app icon gradient that survives the app icon size crop. Light and dark are two grounds, not an inverted copy. See dark mode design, and point theme-color at the same hex.

<meta name="theme-color" content="#f3f6f4" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#12211e" media="(prefers-color-scheme: dark)" />
<style>
  :root {
    color-scheme: light dark;
    --splash: #f3f6f4;
    --edge: #d5ebe3;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --splash: #12211e;
      --edge: #1d4a40;
    }
  }
  html {
    background-color: var(--splash);
  }
  body {
    margin: 0;
    min-height: 100dvh;
    background-color: var(--splash);
    background-image: radial-gradient(circle at 50% 42%, var(--splash) 0%, var(--splash) 58%, var(--edge) 100%);
  }
</style>

Design the ground at 1080×1920

Preview the brand ground at 1080×1920: the portrait first screen, and any loading state after it. That frame is not the file you upload for the system splash.

1. 1

   Sample the centre

   Take the hex behind the icon, once for light and once for dark.

2. 2

   Paste it into every system slot

   Launch background, Android day and night, background_color, theme_color and the CSS background. Same hex, no transparency.

3. 3

   Keep the blend outside the icon

   Leave a wide flat centre. Let the second colour arrive at the edges or along the bottom.

4. 4

   Check the circle

   Keep the symbol in the inner two thirds. Android masks the outer third.

5. 5

   Dismiss on the first real frame

   Open on the app, on this ground. A loading line starts only after that frame is up.

In Gradiently the ground is a Mark at 1080×1920. Export a still for the first screen, and a seamless loop only after the app is up. The centre hex goes into the launch screen, Android and background_color. Try on your brand shows that splash on your name before you claim the Mark.

Keep the launch fast

Do not time a logo or play video before the first frame. A static CSS gradient is text, so nothing downloads. Blurs and constant repaints are the cost, as CSS gradient performance explains. Hold the Android splash only for a small local read, then show a finished screen. A later wait is a status line or a loop, made the way seamless loop video describes. Reduced motion gets the still. A moving ground for video is an animated gradient background, not this second. If the name is on the first screen, sit it on the flat centre, with no shadow behind the type.