Best CSS Gradient Color Picker-Get A free code and script

CSS Gradient Color Picker>

This is a live demo and preview. Get this CSS Gradient Color Picker for free for your own websites and blogs

Gradient Color Code Generator

Current CSS Background

Click here to copy!

CSS Gradient Color Generator Tool

This is Code and demo of CSS Gradient Color Picker. Copy this code and paste it into your own website and blog posts.
<style type="text/css"> /* ----------------------------------------------------------------------------------- This Script was founded & Modify by Emexee Team ----------------------------------------------------------------------------------- */ body { background: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255)); } .title { background-color: #fff; border-left: 0px solid #00FF0D; border-right: 0px solid #00FF0D; border-radius: 0px 0px 0px 0px; color: #fff; padding: 8px; font-size: 22px; text-align: center; } .subtitle { font-family: "Kanit", sans-serif; color: black; } .title { letter-spacing: 0.4em; } .subtitle { letter-spacing: 0.2em; } .color1, .color2 { width: 3em; height: 3em; cursor: pointer; } .current-bg { font-family: "Source Code Pro", monospace; color: white; } .copy-property { color: black; cursor: grab; } .copy-property:active { cursor: grabbing; } .random-btn { color: black; border-radius: 1rem; transition: all 0.3s ease-in-out; } .random-btn:hover { background: steelblue; border: 1px solid steelblue; color: white; transform: scale(1.1); } .adspacebytechnicalarp { padding: 2em; box-shadow: 0 5px 15px rgba(0,0,0,.16); border-radius: 5px; margin-top: 1em; background: #fff; text-align: left; } </style> <center> <!--main section--> <section class="mt-3" id="main"> <div class="container mainbox"> <div class="row"> <div class="col text-center"> <h2 class="title text-uppercase font-weight-bold"> Gradient Color Code Generator </h2> <br /> <input class="color1 my-4 mr-4" name="color1" type="color" value="#f7f7f7" /> <input class="color2" name="color2" type="color" value="#F7EFFF" /> <h4 class="subtitle text-uppercase font-weight-bold"> Current CSS Background </h4> <h5 class="current-bg font-weight-bold my-4"></h5> <p class="copy-property lead font-italic">Click here to copy!</p> <br /> <button class="random-btn btn btn-light btn-lg mt-3 p-3"> Generate random </button> </div> </div> </div> </section> <!--end of main section--> </center> <script language="Javascript"> const htmlBody = document.querySelector(".mainbox"); const color1 = document.querySelector(".color1"); const color2 = document.querySelector(".color2"); const currentSelection = document.querySelector(".current-bg"); const copyProperty = document.querySelector(".copy-property"); const randomButton = document.querySelector(".random-btn"); function setGradient() { htmlBody.style.background = `linear-gradient(to right, ${color1.value}, ${color2.value})`; currentSelection.textContent = `${htmlBody.style.background};`; } function generateRandom() { const randomColor1 = Math.random().toString(16).slice(2, 8).toUpperCase(); const randomColor2 = Math.random().toString(16).slice(2, 8).toUpperCase(); color1.value = `#${randomColor1}`; color2.value = `#${randomColor2}`; setGradient(); } function copyText() { const text = currentSelection.innerText; let temp_element = document.createElement("textarea"); document.body.appendChild(temp_element); temp_element.value = text; temp_element.select(); document.execCommand("copy"); document.body.removeChild(temp_element); } window.addEventListener("load", setGradient); color1.addEventListener("input", setGradient); color2.addEventListener("input", setGradient); copyProperty.addEventListener("click", copyText); randomButton.addEventListener("click", generateRandom); </script><br /><br /><h1 style="text-align: center;">CSS Gradient Color Generator Tool</h1><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div><br /></div>

Code terms

You Can freely use it for personal and users
You Can modify/change the main code
You Can freely add your blogs and websites
Attribution is not required.

If you have any questions about this converter, please feel free to reach out to us via email.

Name


Email Address *


Message *