Keypoint

Responsive Design (Test)
Google Testing tool Validator
SEO Optimized
Ads Ready
And Much More...
<!DOCTYPE html>    
  <html dir='ltr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>    
  <head>    
  <meta name="viewport" content="width=device-width, initial-scale=1.0">    
  <title>Online Gradient Color Code Generator Tool- V1</title>    
  <meta content='gradient color palette, text color gradient css generator, colorspace gradient color css generator, gradient button generator, inear-gradient(top to bottom), css color generator' name='Description'/>    
  <meta content='gradient color palette, text color gradient css generator, colorspace gradient color css generator, gradient button generator, inear-gradient(top to bottom), css color generator' name='Keywords'/>    
  <meta content='index, follow' name='robots'/>    
  <meta content='2 days' name='revisit-after'/>    
  <meta content='English' name='language'/>    
  <meta content='India' name='geo.country'/>    
  <meta content='Maharashtra' name='geo.placename'/>    
  <meta content='global' name='distribution'/>    
  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>    
  <meta content='true' name='MSSmartTagsPreventParsing'/>    
  <meta content='general' name='rating'/>    
  <link href='your_url_here' rel='canonical'/>    
  <style id='page-skin-1' type='text/css'><!--    
   
  body {  
      background: linear-gradient(to right, rgb(177, 56, 168), rgb(250, 116, 5));  
 }  
 .title {  
   background-color: #192B3A;  
   border-left: 12px solid #00FF0D;  
   border-right: 12px solid #00FF0D;  
   border-radius: 50px 117px 50px 117px;  
   color: #fdfdfd;  
   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);  
 }  
 .adspacebyApplePoint {  
   padding: 2em;  
   box-shadow: 0 5px 15px rgba(0,0,0,.16);  
   border-radius: 5px;  
   margin-top: 1em;  
   background: #fff;  
   text-align: left;  
 }  
  --></style>    
  </head>    
  <body>    
  <center>  
  <!-- main section -->  
 <section id="main" class="mt-3">  
      <div class="container">  
           <div class="row">  
                <div class="col text-center">  
                     <h2 class="title text-uppercase font-weight-bold">  
                          COLOR GRADIENT GENERATOR
                     </h2>  
                     <div class="adspacebyApplePoint container">  
         PLACE YOUR AD CODE HERE   
            </div>  
         </br>  
                     <input class="color1 my-4 mr-4" type="color" name="color1" value="#B138A8" />  
                     <input class="color2" type="color" name="color2" value="#FA7405" />  
                     <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">COPY GRADIENT CODE</p>  
                     <div class="adspacebyApplePoint container">  
         PLACE YOUR AD CODE HERE      
            </div>  
         </br>  
                     <button class="random-btn btn btn-light btn-lg mt-3 p-3">  
                          GENERATE RANDOM GRADIENT
                     </button>  
                </div>  
           </div>  
      </div>  
 </section>  
 <!-- end of main section -->   
 </center>  
  <Script Language='Javascript'>    
  const htmlBody = document.body;  
 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>    

<h4 style="text-align:center;"><a href="https://applepoint021.blogspot.com/">Develop By: Apple Point</a></h4>   
</body>    
  </html>     
Similar Post
Color Generator Tool For Blogger 50 Color V2
Note: Not for Mobile view