# YouTube thumbnail background: gradients that make text pop

[Canonical HTML page](https://gradiently.design/guide/youtube-thumbnail-background)

The background decides whether thumbnail text is readable. Build a gradient with one calm area, heavy type, and the same ground on every video in the series.

## The short version

- A YouTube thumbnail background should be a flat colour or a simple gradient, with the words sitting on the part whose lightness barely changes.
- YouTube recommends uploading a video thumbnail at 3840×2160 pixels in 16:9, as a JPG or PNG, and the image must be at least 640 pixels wide.
- Three or four heavy words are enough on a thumbnail, and the bottom-right corner should stay empty because YouTube places the video length there.
- Measure contrast at the darkest and lightest points under the letters, and treat the type as small, because the thumbnail is usually seen tiny.
- Using one background for a whole series makes the channel recognisable in a grid before anyone reads the title.

A **YouTube thumbnail background** should be one calm field: a flat colour, or a gradient whose lightness barely changes under the words. A brighter accent can sit at an edge, away from the letters. A busy photo, a rainbow that crosses a word, or a new colour on every upload all fail the same test. At the size of a stamp, the words disappear.

## What a thumbnail background has to survive

People meet the thumbnail in a grid, often on a phone. [YouTube's thumbnail help page](https://support.google.com/youtube/answer/72431) asks for the largest image you can upload: **3840×2160** pixels for a video, **16:9**, at least **640** pixels wide, as a JPG or PNG. A verified account is required. Phone uploads must stay under **2 MB**. Computer uploads can be up to **50 MB**. Lay the design out at **1280×720**, the same shape and the frame in [YouTube thumbnail size](https://gradiently.design/guide/youtube-thumbnail-size). A smooth gradient looks the same at both sizes, so use the larger file for crisp type. [YouTube thumbnail design](https://gradiently.design/guide/youtube-thumbnail-design) covers the rest of the frame.

> **Vertical videos get a taller crop** If the video is vertical and the thumbnail is 16:9, YouTube swaps in an auto-generated 4:5 image on the home, explore and subscription pages. The 16:9 file still shows on the watch feed, in watch history and on non-mobile platforms. Keep the subject near the centre. Shorts are 9:16, recommended at 2160×3840: see [YouTube Shorts cover size](https://gradiently.design/guide/youtube-shorts-cover-size).

## Choose a calm field, not a busy picture

Use a photo when the photo is the subject, and skip it when it is only decoration. Detail fights the type once the image is tiny. [Readable text on photos](https://gradiently.design/guide/readable-text-on-photos) covers the rescue. The default background is one flat colour, with ink at the opposite lightness. Add a gradient for a brighter edge only if the words stay entirely on one side of the change. A pure white thumbnail fades into YouTube's light pages, and a pure black one fades into the dark pages. A deep, saturated ground stays visible on both.

### Avoid

- A detailed photo sitting under the words
- A gradient that changes lightness inside one word
- Cream type on a pale stop, or near-black on a dark stop
- Words or a face in the bottom-right corner
- A different background on every upload

### Do

- A flat colour, or a gradient with one calm side
- Three or four heavy words, all on that calm side
- Ink chosen for the tone directly behind the letters
- An empty bottom-right corner for the length badge
- The same ground on every video in the series

## Keep the words on the quiet stretch

A gradient is a run of backgrounds. Cream type that is crisp on a dark stop can vanish two letters later, where the blend has lightened, and no single ink survives that crossing. [Text on a gradient](https://gradiently.design/guide/text-on-gradient) covers the same problem on a page. Park the words on the stretch that changes the least, and keep the brighter colour at the far edge.

A 16:9 thumbnail where the words Too warm? run across a changing gradient and parts of the line are hard to read

The headline crosses a changing part of the gradient, so some letters lose contrast whatever the ink.

The same 16:9 thumbnail with a calm, even region of the gradient behind the words Too warm?

The same background, with its calmest region behind the words, so one ink colour holds.

In Gradiently, a Mark can move its calmest region behind the words and pick light or dark ink for each line. You choose how strongly it responds. The type stays on the gradient: no box, no shadow and no blur.

## Contrast that still works when tiny

The [WCAG contrast minimum](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) asks for **4.5:1** between text and the colour behind it, and **3:1** for large text. A thumbnail is drawn large and seen tiny, so aim for 4.5:1 at the worst point under the words, not the average. Lightness does the work, not hue. [Colour contrast](https://gradiently.design/guide/color-contrast-accessibility) is the full test. The table tests cream `#fff7f0` and near-black `#1a0e0a`.

| Stop | Cream #fff7f0 | Near-black #1a0e0a | Use |
| --- | --- | --- | --- |
| Kiln `#2a120c` | 16.7:1 | 1.1:1 | Use cream |
| Hot edge `#e85d04` | 3.3:1 | 5.4:1 | Use near-black |
| Morning `#f8ead7` | 1.1:1 | 16.0:1 | Use near-black |
| Clay `#c45c28` | 4.0:1 | 4.4:1 | Avoid for small type |

Contrast of two inks on four flat stops. Clay clears the large-text bar of 3:1 and misses 4.5:1 for both, so keep words off it.

- Kiln: #2a120c
- Burnt orange: #c2410c
- Hot edge: #e85d04
- Morning: #f8ead7
- Cream ink: #fff7f0
- Near-black: #1a0e0a

Kiln and morning are the fields. Burnt orange and the hot edge are accents. Two inks cover both.

A heavy face in three or four words survives. The title under the image can carry the sentence. Words on the picture should add a result or a question, not repeat the title. [Thumbnail text](https://gradiently.design/guide/typography-for-thumbnails) covers the type. Keep every word out of the bottom-right corner, where the video length sits.

> **Judge it at thumb width** Shrink the thumbnail to about the width of your thumb and read it. If a word fades, move it onto the calmer stop or switch the ink. Change the ground rather than boxing the type.

## Four gradients to start from

Each gradient keeps a long calm stretch and parks the hotter colour away from the words. Copy the one whose calm side matches your ink, and do not cross the boundary.

- Held kiln: `linear-gradient(100deg, #2a120c 0%, #3d1810 68%, #c2410c 100%)`
- Morning clay: `linear-gradient(180deg, #f8ead7 0%, #f0c49a 48%, #c45c28 100%)`
- Edge ember: `linear-gradient(90deg, #1a0c08 0%, #1a0c08 60%, #e85d04 100%)`
- Apricot pool: `radial-gradient(circle at 30% 45%, #f6d7b8 0%, #e08a45 46%, #6b2e16 100%)`

Cream type on the dark left of Held kiln and Edge ember. Near-black type on the pale top of Morning clay and inside Apricot pool, left of centre and clear of the length badge.

## One background for the whole series

A channel is recognised by repetition. Keep the gradient, the type position and the ink, and change the words. A new ground on every upload makes the grid look like several channels.

A 16:9 series thumbnail reading Too warm? on a calm gradient, with the label Lamp 04

Lamp four in a fictional review series. The words sit in a fixed place on a fixed ground.

A matching 16:9 thumbnail from the same series reading The keeper, with the label Lamp 12

Lamp twelve. The words changed. The ground, the position and the ink did not, so the two read as one channel.

Pick one Mark and use it for the whole series. Claiming it puts your name on the public record, and only you and the team you assign can keep designing and exporting with it. Gradiently's YouTube thumbnail frame is 1280×720, and a Pro export of a Mark you own can go up to 4K, the larger file YouTube recommends.

## Build the background in this order

1. **Set a 16:9 frame** Start at 1280×720. Export up to 3840×2160 from a computer. From a phone, stay under 2 MB.
2. **Pick the calm side** Use a flat colour, or a gradient that stays one lightness under the words. Keep any brighter accent on the opposite edge, clear of the bottom-right.
3. **Write three or four words** Use a heavy face. Add to the title, do not copy it, and leave the bottom-right empty for the length badge.
4. **Test the ink when tiny** Cream on a dark field, near-black on a light one. Read it at thumb width. If a word fades, move it. Do not add a box.
5. **Lock the ground for the series** Save the layout. On the next video, change the words only.

The same Held kiln ground, in CSS, for a site card or a still. Keep the headline in the left two-thirds, on the dark stretch.

```css
.thumb {
  width: 1280px;
  aspect-ratio: 16 / 9;
  background: linear-gradient(100deg, #2a120c 0%, #3d1810 68%, #c2410c 100%);
  color: #fff7f0;
  font-weight: 800;
}

```

A 16:9 frame in the held-kiln gradient. Cream type stays on the dark stretch. The orange stays at the right.

## FAQ

### What size should a YouTube thumbnail background be?

YouTube recommends 3840×2160 pixels for a video, in 16:9, at least 640 pixels wide, as a JPG or PNG. Phone uploads must stay under 2 MB, and computer uploads can be up to 50 MB. A 1280×720 image is the same shape and still above the minimum.

### Is a photo or a gradient better behind thumbnail text?

Use a photo when the photo is the subject of the video. Use a flat colour or a calm gradient when the words have to be read, or when a series should look like one channel.

### Where should words sit on a thumbnail background?

On the stretch whose lightness barely changes, in three or four heavy words. Leave the bottom-right corner clear, because YouTube places the video length there.

### How much contrast does thumbnail text need?

Aim for at least 4.5:1 between the letters and the colour directly behind them, checked at the worst point under the words. The large-text bar of 3:1 is a weak target here, because a thumbnail is seen small.

### Can every video use the same thumbnail background?

Yes. Keep the gradient, the type position and the ink, and change the words. That repetition is what makes a series recognisable in a crowded page.

### Why does my thumbnail change on the home page?

If the video is vertical and the thumbnail is 16:9, YouTube replaces it with an auto-generated 4:5 image on the home, explore and subscription pages. Your 16:9 thumbnail still appears on the watch feed, in watch history and on non-mobile platforms.