Hey Guys! Welcome back to Techly Series website.

Assuming You are observing the Normal & Gradient Color Code Generator Tool Script on blogger. This is the Right Place to you. Since You can get this Script for free and gain deep pocket With Your adsense.

Today, in this article, I will Discuss with you about How to Create Normal & Gradient Color Code Generator Tool in Blog - Post or Page.

Information

There's a color pattern. In this, you're made a color pattern by mixing two or further colors. And this Grade color is used in Web Development. If you do rendering also you'll surely know about it. As for web designing, we use different color constitutions for different colors.

So in the same way this is also the Gradient Color Code. We can not remember this. So in this case we need Gradient Color Code Generator Tool to create this Gradient Color. With the help of this tool, we can fluently induce Gradient Color CSS Code.

Color gradients are great for adding depth to an image because of their essential commerce with light and darkness. Combining a gradient with varying situations of nebulosity can help produce a sense of propinquity and distance to images as well. They make further colors available for design use because they vary and flow through numerous different color tones. Contrivers can also use color gradients to subtly guide their addicts’ eyes and attention toward a specific area of a product.

Keep in mind that there are several fashions and patterns of color gradients. They all have a middle starting point where the color starts; additionally, from that point, the original color gradationally blends into different colors. Visually speaking, this creates a certain pattern. The figure, size, order, field, and color preferences will all affect how the color gradient looks.

A linear gradient creates a band of colors appearing from a straight line. Note that the line does n’t have to be perpendicular or vertical or indeed straight. The grade transitions easily from one color to the coming.

How to Create

So, to create Normal & Gradient Color Code Generator Tool on blogger you need to follow the following process below precisely.

What's more, with the help of these steps, you can easily make this tool in your blogger website.

Step 1

• You will go to your - Blogger Dashboard
• Go to Theme
• Go to - Edit HTML
• Search - </head> or &lt;/head&gt;
• Copy this CSS Code below and Paste on top of </head> or &lt;/head&gt;
• Save Theme

<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/itsTSUI/tsP/toolBody.css'/>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>

Step 2

• After Save Theme
• Create a new Post or Page
• Copy this HTML & Javascript Code below and Paste in your blog - Post or Page
• Publish

<div class="Tbody">

<center>
<h4>Normal Colour</h4>
</center>

<b>Choose Colour</b>
<input type="color" id="Cbox1" value="#b138a8" style="height:100px;padding:0 1.5px;border:0">

<button type="button" id="Gbutton1">Get Code<span class="fa fa-hand-o-right"></span></button>

<br/>

<b>Colour Code</b>
<input id="Ccode1" placeholder="Get Colour Code Here..." readonly>

<button type="button" class="copybutton" data-clipboard-target="#Ccode1"><span class='fa fa-files-o'></span>Copy Code</button>

<hr/>

<center>
<h4>Gradient Colour</h4>
</center>

<input id="Cbox2" style="height:100px;padding:0 1.5px;border:0" readonly>

<b>Choose Colour</b>

<center>
<input type="color" id="Cbox3" style="display:inline-block;height:75px;width:48%;padding:0 1.5px;border:0" value="#F81894">

<input type="color" id="Cbox4" style="display:inline-block;height:75px;width:48%;padding:0 1.5px;border:0" value="#0000FF">
</center>

<button type="button" id="Gbutton2">Get Code<span class="fa fa-hand-o-right"></span></button>

<br/<br/>

<b>Colour Code</b>
<input id="Ccode2" placeholder="Get Colour Code Here..." readonly>

<button type="button" class="copybutton" data-clipboard-target="#Ccode2"><span class='fa fa-files-o'></span>Copy Code</button>

<button type="button" id="Rbutton"><i class="fa fa-refresh" aria-hidden="true"></i>Generate random</button>

</div>

<script>{$('#Gbutton1').click(function(){var color=$('#Cbox1').val();$('#Ccode1').val(''+color+'')})}</script>

<script>    
const cbox=document.querySelector("#Cbox2");const color1=document.querySelector("#Cbox3");const color2=document.querySelector("#Cbox4");const ccode=document.querySelector("#Ccode2");const rbutton=document.querySelector("#Rbutton");function setGradient(){cbox.style.background=`linear-gradient(to right,${color1.value},${color2.value})`}
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();ccode.value=`linear-gradient(to right,${color1.value},${color2.value})`}window.addEventListener("load",setGradient);color1.addEventListener("input",setGradient);color2.addEventListener("input",setGradient);rbutton.addEventListener("click",generateRandom)
</script>

<script>{$('#Gbutton2').click(function(){var color1=$('#Cbox3').val();var color2=$('#Cbox4').val();$('#Ccode2').val('linear-gradient(to right,'+color1+','+color2+')')})}</script>

<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script src='https://clipboardjs.com/dist/clipboard.min.js'></script>
<script>$(function(){var clipboard=new ClipboardJS(".copybutton");$(".copybutton").click(function(){$(this).html("<span class='fa fa-check'></span>Code Copied");var that=$(this);var intrvrl=setInterval(function(){that.html("<span class='fa fa-files-o'></span>Copy Code");clearInterval(intrvrl);},1500);});})</script>

Final Words

You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.

I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.

Assuming you experience any issues while copying this script you can impart me by Telegram and I'll attempt to help.