Color Generator Tool For Blogger 50 Color V2

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>
Demo Click here Download Click here
Color Generator Tool For Blogger 50 Color V2

Color Generator Tool For Blogger 50 Color V2

Apple Point

comment 0 Comments

0 Comments
