YouTube Thumbnail Generator

Selected Layer

No layer selected.

Export

Resolution

How to download

Choose your resolution.
Click Export PNG to preview the final PNG in a new tab, or Export & Download to save it directly.
For best quality choose 4K (3840×2160).

:root { --bg: #f6f8fb; --card: #ffffff; --muted: #6b7280; --accent: #ff3b30; --accent-2: #07c; --radius: 10px; --glass: rgba(255,255,255,0.6); --shadow: 0 6px 20px rgba(15,23,42,0.08); --mono: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; } * { box-sizing: border-box; } html,body { height:100%; margin:0; font-family: var(--mono); background: linear-gradient(180deg,#e9f1ff 0%, #f6f8fb 60%); color:#0b1221; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .container { max-width:1200px; margin:0 auto; padding:18px; } .site-header { background:transparent; padding:12px 0; } .header-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; } .logo { font-family: 'Oswald', system-ui; margin:0; font-size:20px; letter-spacing:0.5px; color:#071133; } .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; padding:8px 12px; border-radius:8px; background:var(--card); box-shadow: var(--shadow); cursor:pointer; color:#071133; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; font-weight:600; } .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(15,23,42,0.12); } .btn.primary { background: linear-gradient(90deg,#07c,#2a8cff); color:white; } .btn.danger { background:#fff1f0; color:#b91c1c; } .btn.small { padding:6px 8px; font-size:13px; border-radius:6px; } .animated { will-change: transform; } main { display:grid; grid-template-columns: 220px 1fr 320px; gap:16px; align-items:start; margin-top:18px; } .sidebar { position:relative; } .editor { background:transparent; min-height:540px; display:flex; flex-direction:column; gap:12px; } .properties { } .panel { background:var(--card); padding:12px; border-radius:10px; box-shadow: var(--shadow); margin-bottom:12px; } .panel h3 { margin:0 0 8px 0; font-size:15px; } label { display:block; margin-top:8px; font-size:13px; color:var(--muted); } input[type="text"], input[type="number"], select { width:100%; padding:8px; margin-top:6px; border-radius:8px; border:1px solid #e8eef8; background:#fbfdff; } .upload-btn { position:relative; overflow:hidden; } .upload-btn input[type="file"] { position:absolute; left:0; top:0; opacity:0; height:100%; width:100%; cursor:pointer; } .layers { list-style:none; padding:0; margin:8px 0 0 0; display:flex; flex-direction:column; gap:8px; max-height:240px; overflow:auto; } .layer-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px; cursor:pointer; border-radius:8px; } .layer-item.selected { background:#f0f6ff; border:1px solid #dbeafe; } .preview-wrap { display:flex; align-items:center; justify-content:center; flex:1; } .preview-surface { background:linear-gradient(180deg,#0f1724,#061028); border-radius:12px; padding:20px; box-shadow: 0 20px 40px rgba(2,6,23,0.4); display:flex; align-items:center; justify-content:center; width:100%; min-height:420px; } canvas { display:block; border-radius:6px; background:#061028; max-width:100%; height:auto; } .overlay { position:absolute; pointer-events:none; } .editor-topbar .hint { color:var(--mono); background:rgba(255,255,255,0.06); padding:6px 10px; border-radius:8px; color:#dbeafe; font-size:13px; } footer.site-footer { margin-top:28px; padding:18px 0; color:var(--muted); font-size:13px; } .visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; } .preview-surface { position:relative; } .properties .prop-row { display:flex; gap:8px; margin-top:12px; } details summary { cursor:pointer; margin-top:10px; padding:8px; border-radius:6px; background:#fafafa; } /* Responsive */ @media (max-width: 980px) { main { grid-template-columns: 1fr; padding-bottom:32px; } .sidebar { order:2; display:flex; gap:12px; overflow:auto; } .properties { order:3; } .preview-wrap { order:1; } } const baseWidth = 1920; const baseHeight = 1080; // State const state = { layers: [], bg: { color: '#061028', image: null }, selectedId: null, history: [], historyIndex: -1 }; // DOM const previewCanvas = document.getElementById('previewCanvas'); const previewCtx = previewCanvas.getContext('2d', { alpha: false }); const previewWrap = document.getElementById('previewWrap'); const previewOverlay = document.getElementById('previewOverlay'); const layersList = document.getElementById('layers'); const addTextBtn = document.getElementById('add-text'); const addRectBtn = document.getElementById('add-rect'); const imageUpload = document.getElementById('image-upload'); const bgUpload = document.getElementById('bg-upload'); const bgColorInput = document.getElementById('bg-color'); const clearBgBtn = document.getElementById('clear-bg'); const noSelection = document.getElementById('no-selection'); const layerProps = document.getElementById('layer-props'); const layerText = document.getElementById('layer-text'); const fontFamily = document.getElementById('font-family'); const fontSize = document.getElementById('font-size'); const fontColor = document.getElementById('font-color'); const bringFrontBtn = document.getElementById('bring-front'); const sendBackBtn = document.getElementById('send-back'); const deleteLayerBtn = document.getElementById('delete-layer'); const duplicateBtn = document.getElementById('duplicate'); const resolutionSelect = document.getElementById('resolution'); const exportPngBtn = document.getElementById('export-png'); const exportDownloadBtn = document.getElementById('export-download'); const newProjectBtn = document.getElementById('new-project'); const undoBtn = document.getElementById('undo'); const redoBtn = document.getElementById('redo'); // Initialize preview canvas display size (responsive) function fitPreviewCanvas() { // Use half of base size for preview or fit to container width while preserving ratio const maxWidth = previewWrap.clientWidth - 60; const width = Math.min(maxWidth, 960); const height = Math.round(width * baseHeight / baseWidth); previewCanvas.width = width; previewCanvas.height = height; renderPreview(); } window.addEventListener('resize', fitPreviewCanvas); fitPreviewCanvas(); // Utilities function uid(prefix = 'id') { return prefix + '-' + Math.random().toString(36).slice(2, 9); } function pushHistory() { // snapshot layers and bg const snapshot = JSON.stringify({ layers: state.layers, bg: state.bg }); if (state.historyIndex < state.history.length - 1) { state.history = state.history.slice(0, state.historyIndex + 1); } state.history.push(snapshot); state.historyIndex = state.history.length - 1; } function undo() { if (state.historyIndex <= 0) return; state.historyIndex--; const snapshot = JSON.parse(state.history[state.historyIndex]); state.layers = snapshot.layers; state.bg = snapshot.bg; state.selectedId = null; refreshUI(); } function redo() { if (state.historyIndex >= state.history.length - 1) return; state.historyIndex++; const snapshot = JSON.parse(state.history[state.historyIndex]); state.layers = snapshot.layers; state.bg = snapshot.bg; state.selectedId = null; refreshUI(); } // Layer management function addTextLayer(text = 'New Title') { const layer = { id: uid('layer'), type: 'text', x: baseWidth * 0.08, y: baseHeight * 0.2, width: baseWidth * 0.84, text: text, fontSize: 120, fontFamily: 'Montserrat', color: '#ffffff', fontWeight: '700', rotate: 0, opacity: 1 }; state.layers.push(layer); state.selectedId = layer.id; pushHistory(); refreshUI(); } function addRectLayer() { const layer = { id: uid('layer'), type: 'rect', x: baseWidth * 0.08, y: baseHeight * 0.65, width: baseWidth * 0.84, height: baseHeight * 0.2, color: 'rgba(0,0,0,0.45)', radius: 16 }; state.layers.push(layer); state.selectedId = layer.id; pushHistory(); refreshUI(); } function addImageLayer(img) { // img is HTMLImageElement already loaded const scale = Math.min(baseWidth * 0.6 / img.width, baseHeight * 0.6 / img.height, 1); const w = Math.round(img.width * scale); const h = Math.round(img.height * scale); const layer = { id: uid('layer'), type: 'image', x: (baseWidth - w) / 2, y: (baseHeight - h) / 2, width: w, height: h, image: img }; state.layers.push(layer); state.selectedId = layer.id; pushHistory(); refreshUI(); } function deleteSelectedLayer() { if (!state.selectedId) return; state.layers = state.layers.filter(l => l.id !== state.selectedId); state.selectedId = null; pushHistory(); refreshUI(); } function duplicateSelectedLayer() { if (!state.selectedId) return; const original = state.layers.find(l => l.id === state.selectedId); if (!original) return; const clone = JSON.parse(JSON.stringify(original)); clone.id = uid('layer'); clone.x += 24; clone.y += 16; // If image, keep a reference (can't clone image element via JSON) if (original.type === 'image') { clone.image = original.image; } state.layers.push(clone); state.selectedId = clone.id; pushHistory(); refreshUI(); } function bringSelectedForward() { const idx = state.layers.findIndex(l => l.id === state.selectedId); if (idx < 0 || idx === state.layers.length - 1) return; const [layer] = state.layers.splice(idx, 1); state.layers.splice(idx + 1, 0, layer); pushHistory(); refreshUI(); } function sendSelectedBack() { const idx = state.layers.findIndex(l => l.id === state.selectedId); if (idx <= 0) return; const [layer] = state.layers.splice(idx, 1); state.layers.splice(idx - 1, 0, layer); pushHistory(); refreshUI(); } // UI refresh function refreshUI() { renderPreview(); renderLayersPanel(); updatePropsPanel(); } function renderLayersPanel() { layersList.innerHTML = ''; // display top-first (reverse) for easy UX with visual stacking for (let i = state.layers.length - 1; i >= 0; i--) { const layer = state.layers[i]; const li = document.createElement('li'); li.className = 'layer-item' + (layer.id === state.selectedId ? ' selected' : ''); li.tabIndex = 0; li.innerHTML = `

${layer.type.toUpperCase()}

${layer.type === 'text' ? (layer.text || 'Text') : layer.type === 'image' ? 'Image' : 'Shape'}

`; layersList.appendChild(li); li.querySelector('[data-action="select"]').addEventListener('click', () => { state.selectedId = layer.id; refreshUI(); }); } } function updatePropsPanel() { const selected = state.layers.find(l => l.id === state.selectedId); if (!selected) { noSelection.hidden = false; layerProps.hidden = true; return; } noSelection.hidden = true; layerProps.hidden = false; if (selected.type === 'text') { layerText.value = selected.text || ''; fontFamily.value = selected.fontFamily || 'Montserrat'; fontSize.value = selected.fontSize || 72; fontColor.value = selected.color || '#ffffff'; } else { // Hide text fields for non-text layers layerText.value = ''; } } // Rendering function renderPreview() { // draw into an offscreen high-res canvas (baseWidth x baseHeight) const off = document.createElement('canvas'); off.width = baseWidth; off.height = baseHeight; const ctx = off.getContext('2d', { alpha: false }); // Background ctx.fillStyle = state.bg.color || '#061028'; ctx.fillRect(0, 0, baseWidth, baseHeight); if (state.bg.image) { const img = state.bg.image; // fill cover const scale = Math.max(baseWidth / img.width, baseHeight / img.height); const w = img.width * scale; const h = img.height * scale; const x = (baseWidth - w) / 2; const y = (baseHeight - h) / 2; ctx.drawImage(img, x, y, w, h); } // Layers for (const layer of state.layers) { if (layer.type === 'rect') { ctx.globalAlpha = layer.opacity ?? 1; roundRect(ctx, layer.x, layer.y, layer.width, layer.height, layer.radius); ctx.fillStyle = layer.color || 'rgba(0,0,0,0.4)'; ctx.fill(); ctx.globalAlpha = 1; } else if (layer.type === 'image') { if (layer.image) { ctx.drawImage(layer.image, layer.x, layer.y, layer.width, layer.height); } } else if (layer.type === 'text') { ctx.save(); ctx.globalAlpha = layer.opacity ?? 1; const fs = layer.fontSize || 72; ctx.fillStyle = layer.color || '#fff'; ctx.textBaseline = 'top'; ctx.font = `${layer.fontWeight || '700'} ${fs}px '${layer.fontFamily || 'Montserrat'}'`; const maxW = layer.width || (baseWidth - layer.x * 2); wrapText(ctx, layer.text || '', layer.x, layer.y, maxW, fs * 1.06); ctx.restore(); } } // Draw scaled to preview canvas const scale = previewCanvas.width / baseWidth; previewCtx.save(); previewCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height); previewCtx.imageSmoothingEnabled = true; previewCtx.drawImage(off, 0, 0, baseWidth, baseHeight, 0, 0, previewCanvas.width, previewCanvas.height); // draw selection outline on previewOverlay using transform drawSelectionOverlay(scale); previewCtx.restore(); } function drawSelectionOverlay(scale) { previewOverlay.innerHTML = ''; previewOverlay.style.position = 'absolute'; previewOverlay.style.left = previewCanvas.offsetLeft + 'px'; previewOverlay.style.top = previewCanvas.offsetTop + 'px'; previewOverlay.style.width = previewCanvas.clientWidth + 'px'; previewOverlay.style.height = previewCanvas.clientHeight + 'px'; const selected = state.layers.find(l => l.id === state.selectedId); if (!selected) return; const el = document.createElement('div'); el.style.position = 'absolute'; el.style.border = '2px dashed rgba(255,255,255,0.85)'; el.style.pointerEvents = 'none'; el.style.boxSizing = 'border-box'; const sx = selected.x * scale; const sy = selected.y * scale; const sw = (selected.width ?? (selected.type === 'text' ? baseWidth * 0.8 : baseWidth * 0.2)) * scale; const sh = (selected.height ?? (selected.type === 'text' ? selected.fontSize * 1.3 * Math.ceil(((selected.text||'').length)/(sw/(selected.fontSize||72))) : sw * 0.6)) * scale; el.style.left = Math.round(sx) + 'px'; el.style.top = Math.round(sy) + 'px'; el.style.width = Math.max(12, Math.round(sw)) + 'px'; el.style.height = Math.max(12, Math.round(sh)) + 'px'; previewOverlay.appendChild(el); } // Helper for rounded rect function roundRect(ctx, x, y, w, h, r = 8) { const radius = Math.min(r, w / 2, h / 2); ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.arcTo(x + w, y, x + w, y + h, radius); ctx.arcTo(x + w, y + h, x, y + h, radius); ctx.arcTo(x, y + h, x, y, radius); ctx.arcTo(x, y, x + w, y, radius); ctx.closePath(); } // Basic text wrap function wrapText(ctx, text, x, y, maxWidth, lineHeight) { const words = text.split(' '); let line = ''; let curY = y; for (let n = 0; n < words.length; n++) { const testLine = line + words[n] + ' '; const metrics = ctx.measureText(testLine); const testWidth = metrics.width; if (testWidth > maxWidth && n > 0) { ctx.fillText(line.trim(), x, curY); line = words[n] + ' '; curY += lineHeight; } else { line = testLine; } } ctx.fillText(line.trim(), x, curY); } // Interactions: click to select and drag let dragging = false; let dragOffset = { x: 0, y: 0 }; function getCursorPos(evt) { const rect = previewCanvas.getBoundingClientRect(); const clientX = evt.touches ? evt.touches[0].clientX : evt.clientX; const clientY = evt.touches ? evt.touches[0].clientY : evt.clientY; const x = clientX - rect.left; const y = clientY - rect.top; const scale = previewCanvas.width / baseWidth; return { x: x / scale, y: y / scale }; } previewCanvas.addEventListener('mousedown', startDrag); previewCanvas.addEventListener('touchstart', startDrag, { passive: true }); window.addEventListener('mousemove', onMove); window.addEventListener('touchmove', onMove, { passive: false }); window.addEventListener('mouseup', endDrag); window.addEventListener('touchend', endDrag); function startDrag(evt) { const pos = getCursorPos(evt); // find topmost layer under cursor for (let i = state.layers.length - 1; i >= 0; i--) { const l = state.layers[i]; const w = l.width || (l.type === 'text' ? baseWidth * 0.8 : 0); const h = l.height || (l.type === 'text' ? (l.fontSize || 72) * 1.6 : 0); if (pos.x >= l.x && pos.x <= l.x + w && pos.y >= l.y && pos.y <= l.y + h) { state.selectedId = l.id; dragging = true; dragOffset.x = pos.x - l.x; dragOffset.y = pos.y - l.y; refreshUI(); evt.preventDefault(); return; } } // clicked empty area: deselect state.selectedId = null; refreshUI(); } function onMove(evt) { if (!dragging || !state.selectedId) return; const pos = getCursorPos(evt); const l = state.layers.find(x => x.id === state.selectedId); if (!l) return; l.x = Math.max(0, Math.min(baseWidth - (l.width || 100), pos.x - dragOffset.x)); l.y = Math.max(0, Math.min(baseHeight - (l.height || (l.fontSize || 72)), pos.y - dragOffset.y)); renderPreview(); evt.preventDefault(); } function endDrag() { if (dragging) { dragging = false; pushHistory(); } } // File uploads imageUpload.addEventListener('change', async (e) => { const file = e.target.files && e.target.files[0]; if (!file) return; const img = await loadImageFromFile(file); addImageLayer(img); e.target.value = ''; }); bgUpload.addEventListener('change', async (e) => { const file = e.target.files && e.target.files[0]; if (!file) return; const img = await loadImageFromFile(file); state.bg.image = img; pushHistory(); refreshUI(); e.target.value = ''; }); bgColorInput.addEventListener('input', (e) => { state.bg.color = e.target.value; pushHistory(); refreshUI(); }); clearBgBtn.addEventListener('click', () => { state.bg.image = null; state.bg.color = '#061028'; bgColorInput.value = '#061028'; pushHistory(); refreshUI(); }); function loadImageFromFile(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => { const img = new Image(); img.onload = () => resolve(img); img.onerror = reject; img.src = reader.result; }; reader.onerror = reject; reader.readAsDataURL(file); }); } // Buttons addTextBtn.addEventListener('click', () => addTextLayer('Awesome!')); addRectBtn.addEventListener('click', () => addRectLayer()); bringFrontBtn.addEventListener('click', bringSelectedForward); sendBackBtn.addEventListener('click', sendSelectedBack); deleteLayerBtn.addEventListener('click', deleteSelectedLayer); duplicateBtn.addEventListener('click', duplicateSelectedLayer); layerText.addEventListener('input', (e) => { const l = state.layers.find(x => x.id === state.selectedId); if (!l) return; l.text = e.target.value; renderPreview(); }); fontFamily.addEventListener('change', (e) => { const l = state.layers.find(x => x.id === state.selectedId); if (!l) return; l.fontFamily = e.target.value; renderPreview(); pushHistory(); }); fontSize.addEventListener('change', (e) => { const l = state.layers.find(x => x.id === state.selectedId); if (!l) return; l.fontSize = Number(e.target.value); renderPreview(); }); fontColor.addEventListener('change', (e) => { const l = state.layers.find(x => x.id === state.selectedId); if (!l) return; l.color = e.target.value; renderPreview(); pushHistory(); }); // Export function exportToCanvas(targetWidth, targetHeight) { const off = document.createElement('canvas'); off.width = targetWidth; off.height = targetHeight; const ctx = off.getContext('2d'); // Background ctx.fillStyle = state.bg.color || '#061028'; ctx.fillRect(0, 0, targetWidth, targetHeight); if (state.bg.image) { const img = state.bg.image; const scale = Math.max(targetWidth / img.width, targetHeight / img.height); const w = img.width * scale; const h = img.height * scale; const x = (targetWidth - w) / 2; const y = (targetHeight - h) / 2; ctx.drawImage(img, x, y, w, h); } // Draw each layer scaled const scaleX = targetWidth / baseWidth; const scaleY = targetHeight / baseHeight; for (const layer of state.layers) { if (layer.type === 'rect') { ctx.globalAlpha = layer.opacity ?? 1; roundRect(ctx, layer.x * scaleX, layer.y * scaleY, layer.width * scaleX, layer.height * scaleY, layer.radius * Math.min(scaleX, scaleY)); ctx.fillStyle = layer.color || 'rgba(0,0,0,0.4)'; ctx.fill(); ctx.globalAlpha = 1; } else if (layer.type === 'image') { if (layer.image) { ctx.drawImage(layer.image, layer.x * scaleX, layer.y * scaleY, layer.width * scaleX, layer.height * scaleY); } } else if (layer.type === 'text') { ctx.save(); ctx.globalAlpha = layer.opacity ?? 1; const fs = (layer.fontSize || 72) * ((scaleX + scaleY) / 2); ctx.fillStyle = layer.color || '#fff'; ctx.textBaseline = 'top'; ctx.font = `${layer.fontWeight || '700'} ${fs}px '${layer.fontFamily || 'Montserrat'}'`; const maxW = (layer.width || (baseWidth - layer.x * 2)) * scaleX; wrapText(ctx, layer.text || '', layer.x * scaleX, layer.y * scaleY, maxW, fs * 1.06); ctx.restore(); } } return off; } exportPngBtn.addEventListener('click', (e) => { const [w, h] = resolutionSelect.value.split('x').map(Number); const finalCanvas = exportToCanvas(w, h); // Open in new tab as data URL const data = finalCanvas.toDataURL('image/png'); const win = window.open(); if (win) { win.document.write(`

`); } else { // fallback download downloadDataURL(data, 'thumbnail.png'); } }); exportDownloadBtn.addEventListener('click', (e) => { const [w, h] = resolutionSelect.value.split('x').map(Number); const finalCanvas = exportToCanvas(w, h); finalCanvas.toBlob((blob) => { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `thumbnail-${w}x${h}.png`; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); }, 'image/png'); }); function downloadDataURL(dataURL, filename) { const a = document.createElement('a'); a.href = dataURL; a.download = filename; document.body.appendChild(a); a.click(); a.remove(); } // New project newProjectBtn.addEventListener('click', () => { state.layers = []; state.bg = { color: '#061028', image: null }; state.selectedId = null; pushHistory(); refreshUI(); }); undoBtn.addEventListener('click', undo); redoBtn.addEventListener('click', redo); // Initialize with sample content (async function seed() { state.bg.color = '#061028'; // Sample background image (a soft gradient generated) // Create a simple canvas and use it as an image to avoid external network requirement const bg = document.createElement('canvas'); bg.width = 1600; bg.height = 900; const gctx = bg.getContext('2d'); const grad = gctx.createLinearGradient(0, 0, bg.width, bg.height); grad.addColorStop(0, '#071133'); grad.addColorStop(1, '#08264a'); gctx.fillStyle = grad; gctx.fillRect(0, 0, bg.width, bg.height); // small geometric mark gctx.fillStyle = 'rgba(255,255,255,0.02)'; for (let i = 0; i < 40; i++) { gctx.beginPath(); gctx.arc(Math.random() * bg.width, Math.random() * bg.height, Math.random() * 120, 0, Math.PI * 2); gctx.fill(); } const img = new Image(); img.src = bg.toDataURL(); await img.decode(); state.bg.image = img; // Add a dark translucent bar state.layers.push({ id: uid('layer'), type: 'rect', x: 0, y: baseHeight * 0.6, width: baseWidth, height: baseHeight * 0.4, color: 'rgba(2,6,23,0.65)', radius: 0 }); // Main title state.layers.push({ id: uid('layer'), type: 'text', x: baseWidth * 0.06, y: baseHeight * 0.12, width: baseWidth * 0.7, text: 'Create Eye-catching Thumbnails', fontSize: 110, fontFamily: 'Montserrat', color: '#fff', fontWeight: '700' }); // Subtitle state.layers.push({ id: uid('layer'), type: 'text', x: baseWidth * 0.06, y: baseHeight * 0.52, width: baseWidth * 0.7, text: 'Fast, responsive, and exportable up to 4K', fontSize: 48, fontFamily: 'Roboto', color: '#e6f0ff', fontWeight: '400' }); pushHistory(); refreshUI(); })(); // ensure initial fit requestAnimationFrame(fitPreviewCanvas);

Tools

Canvas

Add

Layers