document.
addEventListener('DOMContentLoaded', () => {
const colorsContainer = document.getElementById('colors');
const gradientDirection = document.getElementById('gradient-direction');
const templateSelect = document.getElementById('template');
const downloadBtn = document.getElementById('download-btn');
const preview = document.querySelector('.canvas-container');
const canvas = document.getElementById('overlay-canvas');
const ctx = canvas.getContext('2d');
let width = 900;
let height = 500;
function getColors() {
return [...document.querySelectorAll('.color-picker')].map(input =>
input.value);
}
function resizeOverlayCanvas() {
const dpr = window.devicePixelRatio || 1;
preview.style.width = `${width}px`;
preview.style.height = `${height}px`;
preview.style.borderRadius = `12px`;
canvas.width = width * dpr;
canvas.height = height * dpr;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
ctx.resetTransform?.(); // clear previous transform if any
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.scale(dpr, dpr);
}
function drawGradient() {
const dir = gradientDirection.value;
const colors = getColors();
ctx.clearRect(0, 0, width, height);
let grad;
if (dir === 'radial') {
const r = Math.max(width, height) / 2;
grad = ctx.createRadialGradient(
width / 2, height / 2, 0,
width / 2, height / 2, r
);
} else {
if (dir === '90deg') {
grad = ctx.createLinearGradient(0, 0, width, 0);
} else if (dir === '180deg') {
grad = ctx.createLinearGradient(0, 0, 0, height);
} else if (dir === '45deg') {
grad = ctx.createLinearGradient(0, 0, width, height);
} else {
grad = ctx.createLinearGradient(0, 0, width, 0);
}
}
colors.forEach((c, i) => {
grad.addColorStop(i / (colors.length - 1), c);
});
ctx.fillStyle = grad;
ctx.fillRect(0, 0, width, height);
}
colorsContainer.addEventListener('input', drawGradient);
gradientDirection.addEventListener('change', drawGradient);
document.getElementById('add-color').addEventListener('click', () => {
const input = document.createElement('input');
input.type = 'color';
input.className = 'color-picker';
input.value = '#000';
input.addEventListener('input', drawGradient);
colorsContainer.appendChild(input);
drawGradient();
});
document.getElementById('random-btn').addEventListener('click', () => {
// pick random gradient direction
const directions = ['90deg', '180deg', '45deg', 'radial'];
const dir = directions[Math.floor(Math.random() * directions.length)];
gradientDirection.value = dir;
// random colors (2 or 3 colors)
const pickers = document.querySelectorAll('.color-picker');
pickers.forEach(picker => picker.remove());
const colorsContainer = document.getElementById('colors');
const numColors = Math.floor(Math.random() * 2) + 2; // 2–3
for (let i = 0; i < numColors; i++) {
const input = document.createElement('input');
input.type = 'color';
input.className = 'color-picker';
input.value = getRandomColor();
input.addEventListener('input', drawGradient);
colorsContainer.appendChild(input);
}
drawGradient();
});
function getRandomColor() {
return `#$
{Math.floor(Math.random()*16777215).toString(16).padStart(6,'0')}`;
}
document.getElementById('remove-color').addEventListener('click', () => {
const pickers = document.querySelectorAll('.color-picker');
if (pickers.length > 2) {
pickers[pickers.length - 1].remove();
drawGradient();
}
});
downloadBtn.addEventListener('click', () => {
const a = document.createElement('a');
a.download = 'gradient.png';
a.href = canvas.toDataURL();
a.click();
});
const templates = [
{ name: 'Sunset Glow', colors: ['#ff7e5f', '#feb47b'], direction: '90deg',
overlay: 'none' },
{ name: 'Ocean Breeze', colors: ['#43cea2', '#185a9d'], direction: '90deg',
overlay: 'none' },
{ name: 'Purple Dream', colors: ['#bc4e9c', '#f80759'], direction: '90deg',
overlay: 'none' },
{ name: 'Emerald Sky', colors: ['#56ab2f', '#a8e063'], direction: '90deg',
overlay: 'none' },
{ name: 'Firestorm', colors: ['#e96443', '#904e95'], direction: '90deg', overlay:
'none' },
{ name: 'Candy', colors: ['#f857a6', '#ff5858'], direction: '90deg', overlay:
'none' },
{ name: 'Aurora', colors: ['#00c3ff', '#ffff1c'], direction: '90deg', overlay:
'none' },
{ name: 'Sunrise', colors: ['#f3904f', '#3b4371'], direction: '90deg', overlay:
'none' },
{ name: 'Coral Reef', colors: ['#ff9966', '#ff5e62'], direction: '90deg',
overlay: 'none' },
{ name: 'Frozen', colors: ['#83a4d4', '#b6fbff'], direction: '90deg', overlay:
'none' },
{ name: 'Citrus', colors: ['#fc4a1a', '#f7b733'], direction: '90deg', overlay:
'none' },
{ name: 'Pink Lemonade', colors: ['#ff758c', '#ff7eb3'], direction: '90deg',
overlay: 'none' },
{ name: 'Galaxy', colors: ['#20002c', '#cbb4d4'], direction: '90deg', overlay:
'none' },
{ name: 'Mint', colors: ['#76b852', '#8dc26f'], direction: '90deg', overlay:
'none' },
{ name: 'Lava', colors: ['#e52d27', '#b31217'], direction: '90deg', overlay:
'none' },
{ name: 'Twilight', colors: ['#614385', '#516395'], direction: '90deg', overlay:
'none' },
{ name: 'Sand & Sea', colors: ['#fceabb', '#f8b500'], direction: '90deg',
overlay: 'none' },
{ name: 'Neon', colors: ['#12c2e9', '#c471ed'], direction: '90deg', overlay:
'none' },
{ name: 'Dusk', colors: ['#2c3e50', '#fd746c'], direction: '90deg', overlay:
'none' },
{ name: 'Blossom', colors: ['#ffb347', '#ffcc33'], direction: '90deg', overlay:
'none' },
{ name: 'Peacock', colors: ['#4facfe', '#00f2fe'], direction: '90deg', overlay:
'none' },
{ name: 'Flamingo', colors: ['#ff6a88', '#ff99ac'], direction: '90deg', overlay:
'none' },
{ name: 'Horizon', colors: ['#00c6ff', '#0072ff'], direction: '90deg', overlay:
'none' },
{ name: 'Grapefruit', colors: ['#e65c00', '#f9d423'], direction: '90deg',
overlay: 'none' },
{ name: 'Velvet', colors: ['#485563', '#29323c'], direction: '90deg', overlay:
'none' },
{ name: 'Dreamscape', colors: ['#5f2c82', '#49a09d'], direction: '90deg',
overlay: 'none' },
{ name: 'Bubblegum', colors: ['#ff9a9e', '#fad0c4'], direction: '90deg', overlay:
'none' },
{ name: 'Tropical', colors: ['#00c3ff', '#ffff1c'], direction: '90deg', overlay:
'none' },
{ name: 'Plum Punch', colors: ['#4a00e0', '#8e2de2'], direction: '90deg',
overlay: 'none' },
{ name: 'Seafoam', colors: ['#00bf8f', '#001510'], direction: '90deg', overlay:
'none' },
{ name: 'Mango', colors: ['#ffe259', '#ffa751'], direction: '90deg', overlay:
'none' },
{ name: 'Berry Blast', colors: ['#833ab4', '#fd1d1d'], direction: '90deg',
overlay: 'none' },
{ name: 'Banana Split', colors: ['#f7ff00', '#db36a4'], direction: '90deg',
overlay: 'none' },
{ name: 'Peachy', colors: ['#ed4264', '#ffedbc'], direction: '90deg', overlay:
'none' },
{ name: 'Blue Lagoon', colors: ['#43c6ac', '#191654'], direction: '90deg',
overlay: 'none' },
{ name: 'Rosewater', colors: ['#f953c6', '#b91d73'], direction: '90deg', overlay:
'none' },
{ name: 'Frostbite', colors: ['#00d2ff', '#3a7bd5'], direction: '90deg', overlay:
'none' },
{ name: 'Citrus Pop', colors: ['#f7971e', '#ffd200'], direction: '90deg',
overlay: 'none' },
{ name: 'Crimson Night', colors: ['#6a3093', '#a044ff'], direction: '90deg',
overlay: 'none' },
{ name: 'Cherry Blossom', colors: ['#eb3349', '#f45c43'], direction: '90deg',
overlay: 'none' },
{ name: 'Lemonade Stand', colors: ['#f9d423', '#ff4e50'], direction: '90deg',
overlay: 'none' },
{ name: 'Skyfire', colors: ['#2980b9', '#6dd5fa'], direction: '90deg', overlay:
'none' },
{ name: 'Watermelon', colors: ['#de6262', '#ffb88c'], direction: '90deg',
overlay: 'none' },
{ name: 'Cotton Candy', colors: ['#ffb347', '#ffccff'], direction: '90deg',
overlay: 'none' },
{ name: 'Minty Fresh', colors: ['#76b852', '#8dc26f'], direction: '90deg',
overlay: 'none' },
{ name: 'Grape Escape', colors: ['#654ea3', '#eaafc8'], direction: '90deg',
overlay: 'none' },
{ name: 'Amber Gold', colors: ['#f7971e', '#ffd200'], direction: '90deg',
overlay: 'none' },
{ name: 'Blueberry', colors: ['#1e3c72', '#2a5298'], direction: '90deg', overlay:
'none' },
{ name: 'Citrus Punch', colors: ['#ee9ca7', '#ffdde1'], direction: '90deg',
overlay: 'none' },
{ name: 'Hot Lava', colors: ['#f00000', '#ff7400'], direction: '90deg', overlay:
'none' },
{ name: 'Teal Whisper', colors: ['#136a8a', '#267871'], direction: '90deg',
overlay: 'none' },
{ name: 'Arctic Chill', colors: ['#00c3ff', '#ffff1c'], direction: '90deg',
overlay: 'none' },
{ name: 'Berry Smoothie', colors: ['#d53369', '#cbad6d'], direction: '90deg',
overlay: 'none' },
{ name: 'Peach Smoothie', colors: ['#ffb347', '#ffcc33'], direction: '90deg',
overlay: 'none' },
{ name: 'Caramel Cream', colors: ['#dd5e89', '#f7bb97'], direction: '90deg',
overlay: 'none' },
{ name: 'Coral Kiss', colors: ['#ff9966', '#ff5e62'], direction: '90deg',
overlay: 'none' },
{ name: 'Sapphire Shine', colors: ['#0f2027', '#203a43'], direction: '90deg',
overlay: 'none' },
{ name: 'Lagoon Blue', colors: ['#4ca1af', '#c4e0e5'], direction: '90deg',
overlay: 'none' },
{ name: 'Lavender Fog', colors: ['#eecda3', '#ef629f'], direction: '90deg',
overlay: 'none' },
{ name: 'Sea Salt', colors: ['#2bc0e4', '#eaecc6'], direction: '90deg', overlay:
'none' },
{ name: 'Pink Skies', colors: ['#ff9a9e', '#fecfef'], direction: '90deg',
overlay: 'none' }
];
templates.forEach((tpl, i) => {
const opt = document.createElement('option');
opt.value = i;
opt.textContent = tpl.name;
templateSelect.appendChild(opt);
});
templateSelect.addEventListener('change', () => {
const tpl = templates[templateSelect.value];
const pickers = document.querySelectorAll('.color-picker');
pickers[0].value = tpl.colors[0];
pickers[1].value = tpl.colors[1];
gradientDirection.value = tpl.direction;
drawGradient();
});
// Initial
resizeOverlayCanvas();
drawGradient();
const copyBtn = document.getElementById('copy-btn');
copyBtn.addEventListener('click', () => {
const dir = gradientDirection.value;
const colors = getColors();
let cssGradient;
if (dir === 'radial') {
cssGradient = `radial-gradient(circle, ${colors.join(', ')})`;
} else {
cssGradient = `linear-gradient(${dir}, ${colors.join(', ')})`;
}
// Create a temp textarea to copy to clipboard
const textarea = document.createElement('textarea');
textarea.value = `background: ${cssGradient};`;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
// Change button text temporarily
const originalText = copyBtn.textContent;
copyBtn.textContent = '✅ Copied!';
copyBtn.disabled = true;
setTimeout(() => {
copyBtn.textContent = originalText;
copyBtn.disabled = false;
}, 2000);
});
});
