Como criar um gerador de gradiente aleatório com JavaScript

Baixar arquivos

Neste tutorial você vai aprender a desenvolver um gerador de gradientes aleatórios usando javascript. Este recurso é muito útil quando queremos testar cores em nossos layouts. Vamos lá?

Para começar, imaginando que você já tem um arquivo HTML e um arquivo Javascript vinculado. No HTML crie um botão com o ID "btnGenerator" que quando clicado gerará as cores do gradiente aleatórioamente. Defina uma const para esse botão.

const btnGenerator = document.getElementById('btnGenerator');Copiar

Adicione um evento do tipo "click" e ouvinte de evento para o botão "btnGenerator", para que quando clicado gere as cores do gradiente.

btnGenerator.addEventListener('click',  () => {
})

Copiar

Dentro da função, defina uma const "hexNumber" do tipo string contendo os dígitos hexadecimais. Essa string será usada para gerar cores aleatórias em formato hexadecimal.

const hexNumber = '0123456789ABCDEF';Copiar

Logo a baixo, defina duas variaveis let "hexCode1" e "hexCode2" para armazenar os códigos hexadecimais, para criar um gradiente de duas cores.

Utlizando loop que será executado seis vezes, recupere um valor aletório da string "hexNumber" para cada número do canal RGB de cada cor.

Por fim, para visulaização do gradiente, podemos aplicar as cores geradas no background da aplicação. Veja código final:

const btnGenerator = document.getElementById('btnGenerator');
btnGenerator.addEventListener('click',  () => {
    const hexNumber = '0123456789ABCDEF';
    let hexCode1 = "";
    let hexCode2 = "";
    // 6 caracteres
    for (let i = 0; i < 6; i++) {
        hexCode1 += hexNumber[Math.floor(Math.random() * hexNumber.length)];
        hexCode2 += hexNumber[Math.floor(Math.random() * hexNumber.length)];
    }
    document.body.style.background = `linear-gradient(270deg, #${hexCode1}, #${hexCode2})`;
})

Copiar