Random CSS Gradient Generator

Need a new background? Instead of searching the web, hit a button to mathematically generate gorgeous hex colors.

The Generation Logic

function randomHex() {
  const chars = '0123456789abcdef';
  let hex = '#';
  for(let i=0; i<6; i++){
    hex += chars[Math.floor(Math.random() * 16)];
  }
  return hex;
}

function updateGradient() {
  const color1 = randomHex();
  const color2 = randomHex();
  const angle = Math.floor(Math.random() * 360);
  
  const cssValue = `linear-gradient(${angle}deg, ${color1}, ${color2})`;
  document.body.style.background = cssValue;
  document.getElementById('cssCode').innerText = `background: ${cssValue};`;
}

Check the Live Demo, generate your favorite gradient, and hit copy!