Notification texts go here. Contact Us Buy Now!

Gradient Colour Code Tool website For Blogger Free

 Hello friends! Welcome to your Epic-Template blog. So in this article today we are going to talk about Gradient Color Code Generator Tool Script for Blogger Download. And this Blogger Me Gradient Color Code Generator Tool Website Create? So we will know all these things in this article. So stay in this article and know more details.


Gradient Colour Code Tool website For Blogger Free

If you do not know what is Gradient Color? So let me tell you that there is a color pattern. In this, you get a color pattern consisting of two or more colors. And this Gradient Color is used in web development. If you do Coding then you must know about it.


As we use different color codes for different colors for web designing. So is the Gradient Color Code in exactly the same way. We cannot remember this. So in this way we need Gradient Color Code Generator Tool to generate this Gradient Color Generate. With the help of this tool, we can easily generate Gradient Color CSS Code.

How to Create Gradient Color Code Generator Tool Script

So now I have provided the answer to the question of many people. Because a lot of people kept asking me whether Techly360 can provide us with Gradient Color Code Generator Tool Script for free. So my answer is yes. Because we provide almost all types of tool script for our Readers and Subscribers for free.

Using these scripts, you can easily create a tool in your own blogger website. By the way, many people want to create their own tool and do online earning. And I am going to make this dream come true.


Steps to Create a Gradient Color Code Generator Tool in Blogger/Blogspot


  • Go to Blogger/Blogspot Dashboard (Old Blogger Dashboard)
  • Now Click on Theme Section
  • Scroll Down & Click on Revert to Classic Themes
  • Now to Click on Revert to Classic Theme
  • Now Turn off Blue & Copy Code Bellow
 <!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</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='Bihar' 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='https://techly360.com/gradient-color-code-generator-tool-script/' rel='canonical'/>    
  <style id='page-skin-1' type='text/css'><!--    
  /*    
  -----------------------------------------------------------------------------------    
  This blog was Created & Modify by Techly360    
  ----------------------------------------------------------------------------------- */    
  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);   
  }   
  .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>    
  </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">   
              Gradient Color Code Generator   
            </h2>   
            <div class="adspacebytechnicalarp container">   
      Place you Ad Code 1     
       </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">Click here to copy!</p>   
            <div class="adspacebytechnicalarp container">   
      Place you Ad Code 2     
       </div>   
      </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.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>    
  </body>    
  </html>    
  • Remove all Code & Paste New Code Here
  • Now Click on Save Theme, That’s All
  • Now Your Gradient Color Code Generator Tool is Ready to Use
Conclusion - How did you like this article of Gradient Color Code Generator Tool Script for Blogger Download. You must definitely comment by commenting in the comment box below. Or you also want to give some kind of Suggestion, then you can share your opinion with us in the Comment Box below.

Getting Info...

About the Author

Hey There I'm Rahul Shah Founder Of Rahul's Blog and interested In Blogging and coding too.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.