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.
On this page
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 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. A smooth gradient looks the same at both sizes, so use the larger file for crisp type. YouTube thumbnail design covers the rest of the frame.
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 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 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.
The headline crosses a changing part of the gradient, so some letters lose contrast whatever the ink.
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 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 is the full test. The table tests cream #fff7f0 and near-black #1a0e0a.
#2a120cCream #fff7f0
Near-black #1a0e0a
Use
#e85d04Cream #fff7f0
Near-black #1a0e0a
Use
#f8ead7Cream #fff7f0
Near-black #1a0e0a
Use
#c45c28Cream #fff7f0
Near-black #1a0e0a
Use
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 covers the type. Keep every word out of the bottom-right corner, where the video length sits.
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.
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.
Lamp four in a fictional review series. The words sit in a fixed place on a fixed ground.
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.
.thumb {
width: 1280px;
aspect-ratio: 16 / 9;
background: linear-gradient(100deg, #2a120c 0%, #3d1810 68%, #c2410c 100%);
color: #fff7f0;
font-weight: 800;
}
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile