Gradient Generator in javascript by Nitin Kumar Output View Horizontal Vertical HTML CSS JS Tidy <div class="wrapper"> <div class="gradient-box"></div> <div class="row options"> <div class="column direction"> <p>Direction</p> <div class="select-box"> <select> <option value="to top">To Top</option> <option value="to right top">To Right Top</option> <option value="to right">To Right</option> <option value="to right bottom">To Right Bottom</option> <option value="to bottom">To Bottom</option> <option value="to left bottom">To Left Bottom</option> <option value="to left">To Left</option> <option value="to left top" selected>To Left Top</option> </select> </div> </div> <div class="column palette"> <p>Colors</p> <div class="colors"> <input type="color" value="#5665E9" /> <input type="color" value="#A271F8" /> </div> </div> <div id="textarea" class="column" disabled>background-image: linear-gradient(to left top, #977DFE, #6878FF);</div> <div class="column generator-button"> <button class="refresh">Refresh</button> <button class="copy">Copy</button> </div> </div> </div> HTML CSS JS Tidy .wrapper { display: flex; flex-wrap:wrap; padding: 25px; background: #fff; border-radius: 7px; } .wrapper .gradient-box { height: auto; width: 50%; border-radius: 7px; background: linear-gradient(to left top, #5665e9, #a271f8); } .wrapper .row { width: 40%; margin: 20px 10px; } .column{margin:20px} .select-box select { width: 100%; font-size: 1.12rem; } .palette input { height: 41px; width: calc(100% / 2 - 20px); } .row textarea { width: calc(100% - 40px); color: #333; font-size: 1.05rem; resize: none; padding: 10px 15px; border-radius: 5px; border: 1px solid #ccc; } .buttons button { padding: 15px 0; border: none; outline: none; color: #fff; margin: 0 0 -15px; font-size: 1.09rem; border-radius: 5px; cursor: pointer; transition: 0.3s ease; } .refresh { background: #6c757d; width: calc(100% / 2 - 20px); } .refresh:hover { background: #5f666d; } .copy { background: #8a6cff; width: calc(100% / 2 - 20px); } .buttons .copy:hover { background: #704dff; } @media only screen and (max-width: 767px){ .wrapper { width: 100%!important; padding: 10px; } .wrapper .gradient-box{ width: 100%; height: 400px; } .wrapper .row { width: 100%; margin: 0px; } } HTML CSS JS Tidy const gradientBox = document.querySelector(".gradient-box"); const selectMenu = document.querySelector(".select-box select"); const colorInputs = document.querySelectorAll(".colors input"); const textarea = document.getElementById("textarea"); const refreshBtn = document.querySelector(".refresh"); const copyBtn = document.querySelector(".copy"); const getRandomColor = () => { const randomHex = Math.floor(Math.random() * 0xffffff).toString(16); return `#${randomHex}`; }; const generateGradient = (isRandom) => { if (isRandom) { colorInputs[0].value = getRandomColor(); colorInputs[1].value = getRandomColor(); } const gradient = `linear-gradient(${selectMenu.value}, ${colorInputs[0].value}, ${colorInputs[1].value})`; gradientBox.style.background = gradient; textarea.value = `background: ${gradient};`; }; const copyCode = () => { navigator.clipboard.writeText(textarea.innerHTML); copyBtn.innerText = "Code Copied!!"; setTimeout(() => (copyBtn.innerText = "Copy"), 1600); }; colorInputs.forEach((input) => { input.addEventListener("input", () => generateGradient(false)); }); selectMenu.addEventListener("change", () => generateGradient(false)); refreshBtn.addEventListener("click", () => generateGradient(true)); copyBtn.addEventListener("click", copyCode); >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Gradient Generator in JavaScript, HTML, and CSS. Without any external library. Catagory Javascript Tags Resource Add External Stylesheets and Script
