GRADIENT COLOR PICKER

 

Gradient Color Code Generator

Current CSS Background

Click here to copy!

 

CSS Gradient Color Picker Online Free Tool

A gradient color code generator is a tool that allows you to select a color and then generate a gradient color from that color, gradient color code generator can be used to determine what colors work well together and how different colors might look when placed next to each other, gradient color code generator makes it easier for people who create websites, advertisements, or marketing materials to choose the right colors for their projects, by using a gradient color code generator, you can easily find the perfect shade of green without having to try out every single green under the sun.

The gradient color code generator is a tool for web designers and graphic artists who want to create a gradient color scheme, gradient color code generator can be used for a variety of purposes, such as creating the background for a blog or a website, designing logos, or creating illustrations.

What is Gradient Color?

Gradient color is a process of color mixing in which two or more colors are placed on top of each other and slowly merged together to create a new color. This is done by gradually decreasing the brightness and chroma of the bottom color and increasing the brightness and chroma of the top color until they meet in the middle.

Gradient color is a design technique that uses a smooth transition from one color to another in order to create an illusion of depth or movement. In digital design, this can be achieved by using two or more different colors as the starting and stopping points for a gradient. In print design, gradient color can be achieved by creating a multi-color blend on paper, which is then scanned and the colors inverted to create the illusion of a gradient.

Gradient color is a technique used in web design that involves gradually transitioning from one color to another across an image or page. Gradients are often used to create the illusion of depth and to add visual interest. For example, a gradient can be used to transition from a dark blue background color to white, creating the look of a brightly lit sky at dusk.

<style type="text/css">    
  /*    
  -----------------------------------------------------------------------------------    
  This Script was founded & Modify by emexee.com 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/>