Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 65
Tutorial para Criar um Painel para Gerar Cores Gradientes

Neste tutorial veremos como criar uma espécie de painel de controle para criar cores gradientes linear ou radial em qualquer direção com as cores RGB.
Vejamos então o exemplo:
Esse exemplo permite-lhe criar qualquer cor gradiente de forma fácil e rápida e copiar o código gerado para qualquer tipo de aplicação que desejar. Para esse exemplo vamos utilizar três arquivos separados, um HTML, um Javascript e um CSS. Você deverá executar primeiro o arquivo HTML:
Arquivo geraCoresGradientes.html:
<!DOCTYPE html> <html lang="en"> <head> <title>Gerador de Cores Gradientes</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="title" content="CSS Gradient Generator 2.0 - A better way to make and generate beautiful gradients"> <meta name="description" content="A free CSS gradient generator tool for easilly creating linear, radial, or degree based gradients."> <meta name="Identifier-URL" content="https://iamcodefoxx.github.io/CSS-Gradient-Generator/"> <link rel="canonical" href="https://iamcodefoxx.github.io/CSS-Gradient-Generator/"> <link rel="shortcut icon" href="gradient.png" /> <meta property="og:site_name" content="CSS Gradient Generator 2.0"> <meta property="og:type" content="website"> <meta property="og:url" content="https://iamcodefoxx.github.io/CSS-Gradient-Generator/"> <meta property="og:title" content="CSS Gradient Generator 2.0 | A better way to make and generate gradients"> <meta property="og:image"> <meta property="og:description" content="A free CSS gradient generator tool for easilly creating linear, radial, or degree based gradients."> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> <script src='/google_analytics_auto.js'></script></head> <body> <div class="app"> <aside class="sidebar"> <div class="branding"> <h2>Gerador de Cores Gradientes 2.0</h2> </div> <div class="sidebars"> <div class="side"> <div class="sidebar-content"> <div class="style"> <p>Estilo</p> <div class="style-btns"> <div> <button class="linearBtn styleActive">LINEAR</button> <button class="radialBtn">RADIAL</button> </div> <i class="fas fa-chevron-circle-right" id="circle-right" onClick="slide('next')"></i> </div> </div> <div class="inputs"> <p>Coress</p> <div> <input type="color" value="" class="hex1"> <input type="color" value="" class="hex2"> </div> </div> <div class="random"> <p>Randômico</p> <i class="fas fa-random" id="randomGradientBtn"></i> </div> <div class="direction"> <p>Direção</p> <div class="arrows"> <i class="fas fa-arrow-left left active"></i> <i class="fas fa-arrow-left upperLeft"></i> <i class="fas fa-arrow-left lowerLeft"></i> <i class="fas fa-arrow-up up"></i> <i class="fas fa-arrow-down down"></i> <i class="fas fa-arrow-left lowerRight"></i> <i class="fas fa-arrow-right upperRight"></i> <i class="fas fa-arrow-right right"></i> </div> <div class="arrows"> <i class="far fa-circle circle"></i> </div> <div class="percent"> <p>Percentual</p> <div class="percent-ranges"> <div> <div class="percent-ranges-label"> <div id="percent-square-1"></div> <span id="color-square-1-per">0%</span> </div> <input type="range" id="percent-range-1" min="0" max="100" value="0" oninput="percentRange1(this.value)"> </div> <div> <div class="percent-ranges-label"> <div id="percent-square-2"></div> <span id="color-square-2-per">100%</span> </div> <input type="range" id="percent-range-2" min="0" max="100" value="100" oninput="percentRange2(this.value)"> </div> </div> </div> </div> <div class="copy"> <p>Copiar</p> <div> <button class="formatBtn" id="getHexBtn">HEX</button> <button class="formatBtn" id="getRgbaBtn">RGBA</button> </div> </div> </div> </div> <div class="side"> <div class="sidebar-content"> <div class="style"> <p>Estilo</p> <div class="style-btns"> <div> <button class="degreesBtn">GRAUS</button> </div> <i class="fas fa-chevron-circle-left" id="circle-left" onClick="slide('prev')"></i> </div> </div> <div class="inputs"> <p>Cores</p> <div> <input type="color" value="" class="hex1"> <input type="color" value="" class="hex2"> <input type="color" value="" class="hex3"> </div> </div> <div class="random"> <p>Randômico</p> <i class="fas fa-random" id="randomDegreesGradientBtn"></i> </div> <div class="degrees"> <p>Graus</p> <div class="degree-ranges"> <div> <div class="degree-ranges-label"> <div id="color-square-1"></div> <span id="color-square-1-deg">217</span> </div> <input type="range" id="degree-range-1" min="-320" max="320" value="217" oninput="degreeRange1(this.value)"> </div> <div> <div class="degree-ranges-label"> <div id="color-square-2"></div> <span id="color-square-2-deg">127</span> </div> <input type="range" id="degree-range-2" min="-320" max="320" value="127" oninput="degreeRange2(this.value)"> </div> <div> <div class="degree-ranges-label"> <div id="color-square-3"></div> <span id="color-square-3-deg">320</span> </div> <input type="range" id="degree-range-3" min="-320" max="320" value="320" oninput="degreeRange3(this.value)"> </div> </div> </div> <div class="copy"> <p>Copiar</p> <div> <button class="formatBtn" id="getDegreesRgbaBtn">RGBA</button> </div> </div> </div> </div> </div> </aside> <main class="gradient"> <div class="my-hamburger"> <div class="menu-toggle"> <div class="hamburger"> <span></span> </div> </div> </div> </main> </div> <script src="script.js"></script> </body> </html>
Arquivo script.js:
var hex1 = randomHex(); var hex2 = randomHex(); var hex3 = randomHex(); var degrees = false; var gradientStyle = "linear-gradient"; var direction = "to right"; var prefixDirect = "left"; var box = 1; var percent_square_1 = document.querySelector("#percent-square-1"); var percent_square_2 = document.querySelector("#percent-square-2"); var percent_range_1 = document.querySelector("#percent-range-1").value; var percent_range_2 = document.querySelector("#percent-range-2").value; var degree_square_1 = document.querySelector("#color-square-1"); var degree_square_2 = document.querySelector("#color-square-2"); var degree_square_3 = document.querySelector("#color-square-3"); var degree_range_1 = document.querySelector("#degree-range-1").value; var degree_range_2 = document.querySelector("#degree-range-2").value; var degree_range_3 = document.querySelector("#degree-range-3").value; var gradient = document.querySelector(".gradient"); const sides = document.querySelectorAll(".side"); const translateAmount = 100; let translate = 0; // LOAD RANDOM COLORS window.onload = function exampleFunction() { h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) document.querySelector(".hex3").value = hex3; percent_square_1.style.background = hex1; percent_square_2.style.background = hex2; degree_square_1.style.background = hex1; degree_square_2.style.background = hex2; degree_square_3.style.background = hex3; document.querySelector(".gradient").style.background = `${hex1}`; document.querySelector(".gradient").style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; document.querySelector(".gradient").style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; document.querySelector(".gradient").style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } // LINEAR SELECTOR BTN document.querySelector(".linearBtn").addEventListener("click", () => { if(document.querySelector(".circle").className.includes('active')) $(".percent").slideToggle("500", "linear"); removeStyleActive(); document.querySelector(".circle").style.opacity = 0; document.querySelector(".linearBtn").className += " styleActive"; if(direction === "ellipse at center"){ removeActive(); direction = "to right"; prefixDirect = "left"; document.querySelector(".left").className += " active"; } gradientStyle = "linear-gradient"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; }) // RADIAL SELECTOR BTN document.querySelector(".radialBtn").addEventListener("click", () => { removeStyleActive(); document.querySelector(".circle").style.opacity = 1; document.querySelector(".radialBtn").className += " styleActive"; gradientStyle = "radial-gradient"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; }) // SWITCH FROM ONE SIDE TO THE NEXT ( SELECTS DEGREES AUTOMATICALLY) slide = (direction) => { if(direction === "next"){ degrees = true; removeStyleActive(); document.querySelector(".degreesBtn").className += " styleActive"; translate -= translateAmount degreesActivate(); }else{ degrees = false; translate += translateAmount removeStyleActive(); if(gradientStyle === "linear-gradient"){ linearRadianActivate() document.querySelector(".linearBtn").className += " styleActive"; }else{ linearRadianActivate() document.querySelector(".radialBtn").className += " styleActive"; } } sides.forEach( sides => (sides.style.transform = `translateX(${translate}%)`) ); } // FUNCTION TO ACTIVATE THE LINEAR OR RADIAL GRADIENT function linearRadianActivate(){ if(document.querySelector(".circle").className.includes('active')){ gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; } else{ gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } } // FUNCTION TO ACTIVATE THE DEGREES GRADIENT function degreesActivate(){ gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } // EVENT FOR COLOR SELECTION h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.addEventListener("input", updateHex1, false)); h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.addEventListener("input", updateHex2, false)); document.querySelector(".hex3").addEventListener("input", updateHex3, false); // UPDATE HEX1 VARIABLE COLOR IN REAL TIME function updateHex1(event){ if(gradient.style.background === `${gradientStyle}(to right, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(left center, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(to right, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0%` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(left center, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`) { if(!degrees){ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to right, ${hex1}, ${hex2})`; }else{ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } else if(gradient.style.background === `${gradientStyle}(to right bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(left top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(to right bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0% ` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(left top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`) { if(!degrees){ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to bottom right, ${hex1}, ${hex2})`; }else{ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } else if(gradient.style.background === `${gradientStyle}(to right top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(left bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(to right top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0%` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(left bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`) { if(!degrees){ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to top right, ${hex1}, ${hex2})`; }else{ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } else if(gradient.style.background === `${gradientStyle}(rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(center top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0%` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(center top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`) { if(!degrees){ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to bottom, ${hex1}, ${hex2})`; }else{ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } else if(gradient.style.background === `${gradientStyle}(to top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(center bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(to top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0%` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(center bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`) { if(!degrees){ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to top, ${hex1}, ${hex2})`; }else{ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } else if(gradient.style.background === `${gradientStyle}(to left top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(right bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(to left top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0%` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(right bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`) { if(!degrees){ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to top left, ${hex1}, ${hex2})`; }else{ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } else if(gradient.style.background === `${gradientStyle}(to left bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(right top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(to left bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0%` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(right top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`) { if(!degrees){ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to bottom left, ${hex1}, ${hex2})`; }else{ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } }else if(gradient.style.background === `${gradientStyle}(to left, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(right center, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(to right, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0%` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(right center, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`){ if(!degrees){ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to left, ${hex1}, ${hex2})`; }else{ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } else { if(!degrees){ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; gradient.style.background = `${gradientStyle}(at center center, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; }else{ hex1 = event.target.value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) percent_square_1.style.background = hex1; degree_square_1.style.background = hex1; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } } // UPDATE HEX2 VARIABLE COLOR IN REAL TIME function updateHex2(event){ if(gradient.style.background === `${gradientStyle}(to right, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(left center, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(to right, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0%` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(left center, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`) { if(!degrees){ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to right, ${hex1}, ${hex2})`; }else{ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } else if(gradient.style.background === `${gradientStyle}(to right bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(left top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(to right bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0% ` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(left top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`) { if(!degrees){ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to bottom right, ${hex1}, ${hex2})`; }else{ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } else if(gradient.style.background === `${gradientStyle}(to right top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(left bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(to right top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0%` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(left bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`) { if(!degrees){ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to top right, ${hex1}, ${hex2})`; }else{ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } else if(gradient.style.background === `${gradientStyle}(rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(center top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0%` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(center top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`) { if(!degrees){ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to bottom, ${hex1}, ${hex2})`; }else{ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } else if(gradient.style.background === `${gradientStyle}(to top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(center bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(to top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0%` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(center bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`) { if(!degrees){ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to top, ${hex1}, ${hex2})`; }else{ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } else if(gradient.style.background === `${gradientStyle}(to left top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(right bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(to left top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0%` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(right bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`) { if(!degrees){ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to top left, ${hex1}, ${hex2})`; }else{ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } else if(gradient.style.background === `${gradientStyle}(to left bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(right top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(to left bottom, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0%` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(right top, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`) { if(!degrees){ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to bottom left, ${hex1}, ${hex2})`; }else{ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } }else if(gradient.style.background === `${gradientStyle}(to left, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `-webkit-${gradientStyle}(right center, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `rgba(0, 0, 0, 0) ${gradientStyle}(to right, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b})) repeat scroll 0% 0%` || gradient.style.background === `rgba(0, 0, 0, 0) -moz-${gradientStyle}(right center, rgb(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}), rgb(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}))` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`){ if(!degrees){ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(to left, ${hex1}, ${hex2})`; }else{ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } else { if(!degrees){ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; gradient.style.background = `${gradientStyle}(at center center, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; }else{ hex2 = event.target.value; h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) percent_square_2.style.background = hex2; degree_square_2.style.background = hex2; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } } // UPDATE HEX3 VARIABLE COLOR IN REAL TIME function updateHex3(event){ if(gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)` || gradient.style.background === `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%) repeat scroll 0% 0%, linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%) repeat scroll 0% 0%, rgba(0, 0, 0, 0) linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%) repeat scroll 0% 0%`) { hex3 = event.target.value; document.querySelector(".hex3").value = hex3; degree_square_3.style.background = hex3; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; } } // HEX1 & HEX2 EVENTS TO SWITCH COLOR INPUT BOXES document.querySelector(".hex1").addEventListener("click", () => { box = 1; document.querySelector(".hex2").style.border = "none"; document.querySelector(".hex1").style.border = "2px solid lightgray"; }) document.querySelector(".hex2").addEventListener("click", () => { box = 2; document.querySelector(".hex1").style.border = "none"; document.querySelector(".hex2").style.border = "2px solid lightgray"; }) // RANDOM GRADIENT GENERATOR BTN document.querySelector("#randomGradientBtn").addEventListener("click", () => { document.querySelector(".hex1").value = randomHex(); document.querySelector(".hex2").value = randomHex(); document.querySelector(".hex3").value = randomHex(); hex1 = document.querySelector(".hex1").value; hex2 = document.querySelector(".hex2").value; hex3 = document.querySelector(".hex3").value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) document.querySelector(".hex3").value = hex3; percent_square_1.style.background = hex1; percent_square_2.style.background = hex2; degree_square_1.style.background = hex1; degree_square_2.style.background = hex2; degree_square_3.style.background = hex3; if(document.querySelector(".circle").className.includes('active')){ gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; } else{ gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } }) // RANDOM DEGREES GRADIENT GENERATOR BTN document.querySelector("#randomDegreesGradientBtn").addEventListener("click", () => { document.querySelector(".hex1").value = randomHex(); document.querySelector(".hex2").value = randomHex(); document.querySelector(".hex3").value = randomHex(); hex1 = document.querySelector(".hex1").value; hex2 = document.querySelector(".hex2").value; hex3 = document.querySelector(".hex3").value; h1 = document.querySelectorAll(".hex1"); h1.forEach(i => i.value = hex1) h2 = document.querySelectorAll(".hex2"); h2.forEach(i => i.value = hex2) document.querySelector(".hex3").value = hex3; percent_square_1.style.background = hex1; percent_square_2.style.background = hex2; degree_square_1.style.background = hex1; degree_square_2.style.background = hex2; degree_square_3.style.background = hex3; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; }) // LEFT ARROW BUTTON document.querySelector(".left").addEventListener("click", (event) => { if(document.querySelector(".circle").className.includes('active')) $(".percent").slideToggle("500", "linear"); removeActive(); document.querySelector(".left").className += " active"; if(box === 1){ direction = "to right"; prefixDirect = "left"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } else{ direction = "to left"; prefixDirect = "right"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } }) // UPPER LEFT ARROW BUTTON document.querySelector(".upperLeft").addEventListener("click", () => { if(document.querySelector(".circle").className.includes('active')) $(".percent").slideToggle("500", "linear"); removeActive(); document.querySelector(".upperLeft").className += " active"; if(box === 1){ direction = "to bottom right"; prefixDirect = "top left"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } else{ direction = "to top left"; prefixDirect = "bottom right"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } }) // LOWER LEFT ARROW BUTTON document.querySelector(".lowerLeft").addEventListener("click", () => { if(document.querySelector(".circle").className.includes('active')) $(".percent").slideToggle("500", "linear"); removeActive(); document.querySelector(".lowerLeft").className += " active"; if(box === 1){ direction = "to top right"; prefixDirect = "bottom left"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } else{ direction = "to bottom left"; prefixDirect = "top right"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } }) // UP ARROW BUTTON document.querySelector(".up").addEventListener("click", () => { if(document.querySelector(".circle").className.includes('active')) $(".percent").slideToggle("500", "linear"); removeActive(); document.querySelector(".up").className += " active"; if(box === 1){ direction = "to bottom"; prefixDirect = "top"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } else{ direction = "to top"; prefixDirect = "bottom"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } }) // DOWN ARROW BUTTON document.querySelector(".down").addEventListener("click", () => { if(document.querySelector(".circle").className.includes('active')) $(".percent").slideToggle("500", "linear"); removeActive(); document.querySelector(".down").className += " active"; if(box === 1){ direction = "to top"; prefixDirect = "bottom"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } else{ direction = "to bottom"; prefixDirect = "top"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } }) // LOWER RIGHT CORNER ARROW BUTTON document.querySelector(".lowerRight").addEventListener("click", (event) => { if(document.querySelector(".circle").className.includes('active')) $(".percent").slideToggle("500", "linear"); removeActive(); document.querySelector(".lowerRight").className += " active"; if(box === 1){ direction = "to top left"; prefixDirect = "bottom right"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } else{ direction = "to bottom right"; prefixDirect = "top left"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } }) // UPPER RIGHT CORNER ARROW BUTTON document.querySelector(".upperRight").addEventListener("click", (event) => { if(document.querySelector(".circle").className.includes('active')) $(".percent").slideToggle("500", "linear"); removeActive(); document.querySelector(".upperRight").className += " active"; if(box === 1){ direction = "to bottom left"; prefixDirect = "top right"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } else{ direction = "to top right"; prefixDirect = "bottom left"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } }) // RIGHT ARROW BUTTON document.querySelector(".right").addEventListener("click", (event) => { if(document.querySelector(".circle").className.includes('active')) $(".percent").slideToggle("500", "linear"); removeActive(); document.querySelector(".right").className += " active"; if(box === 1){ direction = "to left"; prefixDirect = "right"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } else{ direction = "to right"; prefixDirect = "left"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2})`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1}, ${hex2})`; } }) // CIRCLE BUTTON document.querySelector(".circle").addEventListener("click", (event) => { $(".percent").slideToggle("500", "linear"); removeActive(); document.querySelector(".circle").className += " active"; direction = "ellipse at center"; prefixDirect = "center"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; }) // COPY HEX CODE TO CLIPBOARD document.querySelector("#getHexBtn").addEventListener("click", () => { if(document.querySelector(".circle").className.includes('active')){ const hex = `background: ${hex1};\nbackground: -webkit-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%);\nbackground: -moz-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%);\nbackground: ${gradientStyle}(${direction}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%);`; navigator.clipboard.writeText(hex); } else { const hex = `background: ${hex1};\nbackground: -webkit-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2});\nbackground: -moz-${gradientStyle}(${prefixDirect}, ${hex1}, ${hex2});\nbackground: ${gradientStyle}(${direction}, ${hex1}, ${hex2});`; navigator.clipboard.writeText(hex); } }) // COPY RGBA CODE TO CLIPBOARD document.querySelector("#getRgbaBtn").addEventListener("click", () => { if(document.querySelector(".circle").className.includes('active')){ const rgba = `background: rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 1.0);\nbackground: -webkit-${gradientStyle}(${prefixDirect}, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 1.0) ${percent_range_1}%, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 1.0) ${percent_range_2}%);\nbackground: -moz-${gradientStyle}(${prefixDirect}, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 1.0) ${percent_range_1}%, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 1.0) ${percent_range_2}%);\nbackground: ${gradientStyle}(${direction}, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 1.0) ${percent_range_1}%, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 1.0) ${percent_range_2}%);`; navigator.clipboard.writeText(rgba); }else{ const rgba = `background: rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 1.0);\nbackground: -webkit-${gradientStyle}(${prefixDirect}, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 1.0), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 1.0));\nbackground: -moz-${gradientStyle}(${prefixDirect}, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 1.0), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 1.0));\nbackground: ${gradientStyle}(${direction}, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 1.0), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 1.0));`; navigator.clipboard.writeText(rgba); } }) // COPY DEGREES RGBA CODE TO CLIPBOARD document.querySelector("#getDegreesRgbaBtn").addEventListener("click", () => { const rgba = `background: linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%),\n linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%),\n linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%);`; navigator.clipboard.writeText(rgba); }) // REMOVE ACTIVE CLASS FROM ARROW function removeActive(){ var current = document.querySelectorAll(".active"); current[0].className = current[0].className.replace(" active", ""); } function removeStyleActive(){ var current = document.querySelectorAll(".styleActive"); current[0].className = current[0].className.replace(" styleActive", ""); } // RANDOM HEX NUMBER GENERATOR function randomHex(){ var hex_numbers = ["0","1","2","3","4","5","6","7","8","9","A", "B", "C", "D", "E", "F"]; var hexcode = ""; var random_index = 0; for(let i = 0; i < 6;i++){ random_index = Math.floor(Math.random() * hex_numbers.length); hexcode += hex_numbers[random_index]; } return "#" + hexcode; } // HEX TO RGB CONVERTER function hex_to_RGB(hex) { var m = hex.match(/^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i); return { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) }; } function percentRange1(){ percent_range_1 = document.querySelector("#percent-range-1").value; document.querySelector("#color-square-1-per").textContent = percent_range_1 + "%"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; }; function percentRange2(){ percent_range_2 = document.querySelector("#percent-range-2").value; document.querySelector("#color-square-2-per").textContent = percent_range_2 + "%"; gradient.style.background = `${hex1}`; gradient.style.background = `-webkit-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; gradient.style.background = `-moz-${gradientStyle}(${prefixDirect}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; gradient.style.background = `${gradientStyle}(${direction}, ${hex1} ${percent_range_1}%, ${hex2} ${percent_range_2}%)`; }; function degreeRange1(){ degree_range_1 = document.querySelector("#degree-range-1").value; document.querySelector("#color-square-1-deg").textContent = degree_range_1; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; }; function degreeRange2(){ degree_range_2 = document.querySelector("#degree-range-2").value; document.querySelector("#color-square-2-deg").textContent = degree_range_2; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; }; function degreeRange3(){ degree_range_3 = document.querySelector("#degree-range-3").value; document.querySelector("#color-square-3-deg").textContent = degree_range_3; gradient.style.background = `linear-gradient(${degree_range_1}deg, rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0.9), rgba(${hex_to_RGB(hex1).r}, ${hex_to_RGB(hex1).g}, ${hex_to_RGB(hex1).b}, 0) 70.71%), linear-gradient(${degree_range_2}deg, rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0.9), rgba(${hex_to_RGB(hex2).r}, ${hex_to_RGB(hex2).g}, ${hex_to_RGB(hex2).b}, 0) 70.71%), linear-gradient(${degree_range_3}deg, rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0.9), rgba(${hex_to_RGB(hex3).r}, ${hex_to_RGB(hex3).g}, ${hex_to_RGB(hex3).b}, 0) 70.71%)`; }; $(".percent").hide(); const menu_toggle = document.querySelector(".menu-toggle"); const sidebar = document.querySelector(".sidebar"); menu_toggle.addEventListener("click", () => { menu_toggle.classList.toggle("is-active") sidebar.classList.toggle("is-active") })
Arquivo style.css:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap'); *{ margin: 0; font-family: 'Montserrat', sans-serif; } body{ color: #333; } input[type="color"] { -webkit-appearance: none; width: 85px; height: 40px; border: none; background-color: transparent; } input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: 1px solid lightgray; border-radius: 5px; cursor: pointer; } input[type="color"]::-moz-color-swatch { border: 2px solid lightgray; border-radius: 5px; } input[type=range] {-webkit-appearance: none;} input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; border-radius: 5px; border: 1px solid lightgray; } input[type="range"]::-moz-range-track { border: 1px solid lightgray; border-radius: 5px; height: 6px; } input[type=range]::-webkit-slider-thumb { box-shadow: 1px 1px 1px lightgray; border: 1px solid lightgray; height: 16px; width: 16px; border-radius: 15px; background: #FFFFFF; cursor: pointer; -webkit-appearance: none; margin-top: -6.5px; } /* width */ ::-webkit-scrollbar{ width: 10px; } /* Track */ ::-webkit-scrollbar-track{ background-color: #f2f2f2; } /* Handle */ ::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 3px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #bfbfbf; } button{ font-size: 0.7rem; } h2{ font-size: 1.5rem; color: gray; } p, a{ text-decoration: none; font-size: .8rem; color: #333; } .app{ display: flex; min-height: 100vh; position: relative; } .sidebar{ flex: 1 1 0; max-width: 325px; overflow: hidden; -webkit-box-shadow: 5px 0 5px -2px rgba(128, 128, 128, 0.3); box-shadow: 5px 0 5px -2px rgba(128, 128, 128, 0.3); } .sidebars{ display: flex; width: 200%; box-sizing: border-box; } .side{ width: 100%; transition: all 0.7s; } .branding{ height: 55px; padding: 20px 20px 10px 20px; } .sidebar-content{ display: flex; flex-direction: column; align-items: flex-start; gap: 25px; padding: 20px; height: calc(100vh - 125px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } .branding{ font-size: 1.2rem; } .style-btns{ display: flex; justify-content: center; align-items: center; gap: 15px; } .style, .inputs, .random, .direction, .copy, .arrows, .degrees, .degree-ranges, .percent, .percent-ranges{ display: flex; flex-direction: column; gap:10px; } .percent{ margin-top: 10px; } #circle-right, #circle-left{ box-shadow: none; font-size: 1.5rem; transition: 0.3s ease-out; } #circle-right:hover, #circle-left:hover{ color: black; background-color: white; } .arrows{ flex-direction: row; } .fas, .far{ font-size: 1rem; cursor: pointer; padding: 5px; width: 15px; border-radius: 50%; outline: none; transition: 0.7s ease-in-out; box-shadow: 0 0 5px #bbb; display: flex; justify-content: center; color: gray; } .far{ opacity: 0; } .upperLeft{ transform: rotate(45deg); } .lowerLeft{ transform: rotate(-45deg); } .lowerRight{ transform: rotate(-120deg); } .upperRight{ transform: rotate(-45deg); } .active, .fas:hover{ background-color: #666; color: white; } .linearBtn, .radialBtn, .degreesBtn, .formatBtn, #resetDegrees{ padding: 8px; border: 2px solid lightgray; background-color: white; color: #333; cursor: pointer; border-radius: 5px; width: 85px; transition: 0.3s ease-out; } .linearBtn:hover, .radialBtn:hover, .degreesBtn:hover, .formatBtn:hover{ box-shadow: 0 0 5px gray; border: 2px solid gray; } .styleActive{ box-shadow: 0 0 5px gray; border: 2px solid gray; background-color: whitesmoke; } .formatBtn:active{ box-shadow: 0 5px #666; transform: translateY(4px); } .degrees, .percent{ width: 100%; } .degree-ranges, .percent-ranges{ gap: 20px; } .degree-ranges-label, .percent-ranges-label{ display: flex; justify-content: space-between; align-items: center; } .degree-ranges-label span, .percent-ranges-label span{ font-size: 0.8rem; } #color-square-1, #color-square-2, #color-square-3, #percent-square-1, #percent-square-2 { width: 20px; height: 20px; cursor: pointer; border-radius: 3px; background-color: white; border: 1px solid #999; } #degree-range-1, #degree-range-2, #degree-range-3, #percent-range-1, #percent-range-2{ width: 100%; } .gradient{ flex: 1 1 0; padding: 20px; } .my-hamburger{ width: 100%; display: flex; justify-content: flex-end; } .menu-toggle { display: none; width: 45px; height: 45px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 5px gray; background-color: white; } .hamburger { position: relative; top: calc(50% - 2px); left: 50%; transform: translate(-50%, -50%); width: 25px; } .hamburger > span, .hamburger > span::before, .hamburger > span::after { display: block; position: absolute; width: 100%; height: 3px; border-radius: 99px; background-color: #666; transition-duration: .25s; } .hamburger > span::before { content: ''; top: -8px; } .hamburger > span::after { content: ''; top: 8px; } .menu-toggle.is-active .hamburger > span { transform: rotate(45deg); } .menu-toggle.is-active .hamburger > span::before { top: 0; transform: rotate(0deg); } .menu-toggle.is-active .hamburger > span::after { top: 0; transform: rotate(90deg); } @media(max-width: 1024px){ .menu-toggle { display: block; } .sidebar{ position: fixed; top: 0; left: -325px; height: 100vh; width: 100%; max-width: 325px; transition: 0.2s linear; background-color: white; } .sidebar.is-active { left: 0; } }
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar uma Máscara em uma Imagem
Tutorial para Extrair Números Duplicados em uma Array >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino