# Splash screen design: the first second of your app
[Canonical HTML page](https://gradiently.design/guide/splash-screen-design)
The launch screen is a flat colour and your icon. The gradient belongs on the first real screen, joined so the handoff is invisible and nobody waits on a logo.
## The short version
- Splash screen design is a handoff: the system paints one flat colour, and the gradient appears on the first screen with that colour in the centre.
- On iPhone and iPad the launch screen should match the first screen, with no text, no ads and no extra logo.
- On Android 12 and later the splash is the app icon on one opaque colour, cropped to a circle, with icon motion at or under one second.
- For an installed web app, background_color is that same flat colour, so the window does not flash before CSS loads.
- Design the ground at 1080×1920, dismiss the system frame when the first screen is ready, and save any loop for after that.
**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.
> **A branded splash comes after launch** On iPhone and iPad, put a branded graphic after launch, at the start of onboarding. Do not hold the launch screen open to make time for it.
## What each platform will actually paint
| Surface | What it can paint | The limit |
| --- | --- | --- |
| iPhone and iPad launch | A static frame like the first screen | No text, no ads, no extra logo |
| Android 12 and later | Icon on one opaque colour | Circle crop, motion about 1 second |
| Installed site on Android | Icon, background colour, theme colour | One colour, no transparency |
| In-app loading frame | The full gradient, still or loop | Only after the system frame |
A gradient belongs on the last row. The other three take one opaque colour so the handoff can match.
### 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.
> **Do not follow one splash with another** If the first screen is another full-screen logo, people see two splashes. Open on the real screen, ground already in place, with no second spinner.
### Installed web apps: background_color
[`background_color`](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/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](https://web.dev/learn/pwa/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.
```json
{
"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"
}
]
}
```
Fictional app Orchard, using the night handoff colour. A light-first app puts #f3f6f4 in both fields. Start with a 512 pixel icon.
## 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.
- Night centre: #12211e
- Night edge: #1d4a40
- Day centre: #f3f6f4
- Day edge: #d5ebe3
Paste the centre colours into the launch screen, Android and the manifest. Leave the edge colours inside the gradient.
- Night, flat centre: `radial-gradient(circle at 50% 42%, #12211e 0%, #12211e 58%, #1d4a40 100%)`
- Day, flat centre: `radial-gradient(circle at 50% 42%, #f3f6f4 0%, #f3f6f4 58%, #d5ebe3 100%)`
- Night, shift at the bottom: `linear-gradient(180deg, #12211e 0%, #12211e 72%, #1d4a40 100%)`
The solid holds through the centre. Copy that hex into the system.
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](https://gradiently.design/guide/app-icon-gradient) that survives the [app icon size](https://gradiently.design/guide/app-icon-size) crop. Light and dark are two grounds, not an inverted copy. See [dark mode design](https://gradiently.design/guide/dark-mode-design), and point `theme-color` at the same hex.
### Avoid
- A slogan on the launch screen
- A gradient as the Android window
- Icon motion longer than one second
- Artwork in the outer third of the icon
- Holding the splash for a video
- A different night hex on the page
### Do
- Match the launch screen to the first screen
- Copy one opaque handoff colour everywhere
- Keep vector motion under a second, and skippable
- Sit the symbol inside the visible circle
- Dismiss when the first screen is ready
- Use the same night hex in theme and CSS
```html
```
The CSS background colour is the handoff. The gradient sits on top and stays flat behind the icon.
## 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.
- Phone ground: 1080 × 1920
- Icon master: 1024 × 1024
- Web icon: 512 × 512
The tall frame is the brand ground. The squares are what Android and an installed site crop into the centre.
A tall phone frame reading Orchard on a full bleed gradient, with no slogan
The first screen at 1080×1920. The name sits where the icon was.
The same tall gradient with Orchard and the line Getting today's three things
A later loading state on the same ground: one status line, no offer.
1. **Sample the centre** Take the hex behind the icon, once for light and once for dark.
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. **Keep the blend outside the icon** Leave a wide flat centre. Let the second colour arrive at the edges or along the bottom.
4. **Check the circle** Keep the symbol in the inner two thirds. Android masks the outer third.
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](/try) 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](https://gradiently.design/guide/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](https://gradiently.design/guide/seamless-loop-video) describes. [Reduced motion](https://gradiently.design/guide/reduced-motion) gets the still. A moving ground for video is an [animated gradient background](https://gradiently.design/guide/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.
> **One hex, then search the project** Search the project for the old splash value and replace every copy. One leftover hex, in a theme or a startup image, is the usual flash.
## FAQ
### Can a splash screen be a gradient?
The system frame cannot. Put the gradient on the first screen, with its centre equal to the one opaque colour used for launch.
### How long should a splash screen stay up?
Until the first screen is ready. Keep Android icon motion at or under one second, and do not add a timer for a logo.
### What size should I design a splash screen?
Preview the ground at 1080×1920. On Android, fit the icon in a 160 dp circle on a 240 dp canvas, or 192 on 288 with no icon background. Animated icons use a 432 dp canvas, inner 288 dp visible.
### Should I put my logo on the launch screen?
Only if it already sits on the first screen, in the same place. Android centres the app icon. Leave the bottom branding image off.
### Does background_color accept a gradient?
No. It is one opaque colour. On Android an installed site uses it with the theme colour and the icon. Safari on iPhone does not.
### What if the app still needs a moment to load?
Dismiss onto the real first screen. Show a short status on the same ground, or a short loop, and a still when reduced motion is on.