Color Generator Tool For Blogger 50 Color V2

Keypoint

Responsive Design (Test)
Google Testing tool Validator
SEO Optimized
Ads Ready
And Much More...
<!DOCTYPE html>
<html>
<head>
<title>Gradient Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Kufam:wght@500&display=swap');
*{
    font-family: 'Kufam', cursive;
    padding:0;
    margin:0;
}
h2{
    position:relative;
    text-align:center;
    width:100%;
    margin-top:20px;
    margin-bottom:10px;
    box-shadow:0 1px 10px rgba(0,0,0,0.3) ;
}
    #gradient {
        position:relative;
        width:100%;
        height:50%;
        margin-top:30px;
    }
    #gradient input[type=text]{
        position:relative;
        width:80px;
        height:80px;
        border:none;
        float:left;
        background:#000;
        margin:5px;
        text-align:center;
        color:#fff;
        outline:none;
        transition:.1s;
        border-radius:5px;
        margin-left:15px;
        overflow:hidden;
        text-overflow:ellipsis;
        font-size:10px;
    }
    #gradient input[type=text]:hover{
        box-shadow:0 0 10px 1px rgba(0,0,0,0.6);
        font-size:15px;
    }
    
</style>
</head>
<body>
<h2>50 Gradient Picker</h2>
<h4 style="text-align:center;"><a href="https://applepoint021.blogspot.com/">Develop By: Apple Point</a></h4> 

<div id="gradient" >
</div>
</body>
<script type="text/javascript">
//var slider = document.getElementById("Angle");
var gradient = document.getElementById("gradient");
var gradientShades = 53;
var gradientBoxAll = [];
var angle = 145;
for (var i=0;i<gradientShades;i++){
    var inputElements = document.createElement("input");
    gradientBoxAll.push(inputElements);
    gradient.appendChild(inputElements);
}
gradientBoxAll.forEach((x)=>{
    x.classList.add("gradientBoxes");
})
var gradientBoxes = document.getElementsByClassName("gradientBoxes");
var gradientColor = [
["#9999a4","#60606b"],
["#ffffff","#07f8f9"],
["#fdfbfb","#eaedee"],
["#e62976","#ff66a4"],
["#380152","#9903e3"],
["#f8d800","#fdeb71"],
["#00ffa1","#00ffff"],
["#d9e021","#fb872b"],
["#852d91","#312a6c"],
["#6B73FF","#000DFF"],
["#ffdf40","#ff8359"],
["#65799B","#5E2563"],
["#59c2ff","#1270e3"],
["#5496ff","#8739e5"],
["#aff57a","#54d159"],
["#46eeaa","#2cbfc7"],
["#15eded","#029cf5"],
["#ff63de","#b122e5"],
["#ff7c6e","#f5317f"],
["#f02fc2","#6094ea"],
["#65799b","#5e2563"],
["#184e68","#57ca85"],
["#5b247a","#1bcedf"],
["#ffe530","#ff2525"],
["#00cdff","#4218d8"],
["#ff9897","#f650a0"],
["#92ffc0","#002661"],
["#f05f57","#360940"],
["#fad7a1","#e96d71"],
["#fff6b7","#f6416c"],
["#b6c0c5","#112d60"],
["#ffe998","#57370d"],
["#9f879f","#f9bfda"],
["#05999e","#cbe7e3"],
["#58126a","#f6b2e1"],
["#5b146f","#ff009c"],
["#7F00FF","#E100FF"],
["#232526","#414345"],
["#EB3349","#F45C43"],
["#69C4FF","#5AF9D4"],
["#EC9F05","#FF4E00"],
["#B91372","#6B0F1A"],
["#5AFF15","#00B712"],
["#5F72BE","#9921E8"],
["#DB3445","#F71735"],
["#6D17CB","#2876F9"],
["#24F794","#20BA3E"],
["#56ab2f","#a8e063"],
["#aa076b","#61045f"],
["#A1C4FD","#C2E9FB"],
["#42E695","#3BB2B8"],
["#13F1FC","#0470DC"],
["#F5515F","#A1051D"]
];

//function gradients(angle){
//  angle = slider.value; 
for(var i=0;i<gradientBoxes.length;i++){
    gradientBoxes[i].style.background = "linear-gradient("+angle+"deg,"+gradientColor[i][0]+","+gradientColor[i][1]+")";
    gradientBoxes[i].value = "linear-gradient("+angle+"deg,"+gradientColor[i][0]+","+gradientColor[i][1]+")";
}


gradientBoxAll.forEach((box)=>{
    box.readOnly = "true";
    box.setAttribute("type","text");
    box.addEventListener("click",()=>{
        box.select();
        box.setSelectionRange(0, 99999);
        document.execCommand("copy");
        navigator.vibrate(100);
        box.value = "Copied!";
        box.style.borderRadius = "50%"
        setTimeout(()=>{
        box.value= box.style.background;
        box.style.borderRadius ="5px";
        },700);
    })
    
})

</script>

</html>
Similar Post
Online Colour Generator Tool For Blooger V1
Note: Not for Mobile view