Auto color generator gradient color maker code

<body id="gradient"> 
<br><br>
<div class="css-3d-text">linear gradient background</div>

<button class="btn"id="random">random</button>

<h3></h3>
  <style>
    body {
background: linear-gradient(to right, red, yellow);

}.color1{   
width :70px;
height :70px;
box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);
border-radius:4px ; 
}.color2{   
width :70px;
height :70px;
box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);
border-radius:4px ;      
 
 
}.css-3d-text {
   font-size: 40px;
   color: #ffffff;
   font-family: Times New Roman;
   font-weight: bold;
   text-shadow: 0px 0px 0 rgb(243, 243, 243),
     0px 1px 0 rgb(230, 230, 230),
     0px 2px 0 rgb(218, 218, 218),
     0px 3px 0 rgb(205, 205, 205),
     0px 4px 0 rgb(193, 193, 193),
     0px 5px 4px rgba(0, 0, 0, 0.34),
     0px 5px 1px rgba(0, 0, 0, 0.5),
     0px 0px 4px rgba(0, 0, 0, .2);

}.btn{
background-color :#000000 ;
color:white ;
border :1px solid #ffffff ;
border-radius: 5px;
padding:8px 30px ;
font-weight: bold;
box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);
position: relative;

}.button:hover {
background:linear-gradient(to right, rgb(0, 214, 0), rgb(0, 140, 0));

}.btn:before, .btn:after {
  
	content: '';
	position: absolute;
	left: -2px;
	top: -2px;
	border-radius: 5px; 
	background: linear-gradient(45deg, #fb0094,#0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
		#0000ff, #00ff00,#ffff00, #ff0000);
	background-size: 400%;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	z-index: -1;
	animation: steam 10s linear infinite;
	
}@keyframes steam{
	0%{
background-position: 0 0;
	}50%{
background-position: 400% 0;

}100%{
background-position: 0 0;
	}
}.btn:after {
filter: blur(2px);

}</style>
  
  <script>
    var css = document.querySelector("h3");
    var color1 = document.querySelector(".color1");
    var color2 = document.querySelector(".color2");
    var body = document.getElementById("gradient");
    var random = document.getElementById("random");
    var auto = document.getElementById("auto");
    var stop = document.getElementById("stop");
    
function setGradient() {
body.style.background= "linear-gradient(to right," + color1.value + "," + color2.value + ")";
css.textContent=body.style.background;}
    
function randomColor() {
var newColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
return newColor;}

function randomGradient() {
color1.value = randomColor();
color2.value = randomColor();
setGradient();}
    
color1.addEventListener("input", setGradient)
color2.addEventListener("input", setGradient)
random.addEventListener("click", randomGradient)
    
auto.addEventListener("click", function() {interval = setInterval(randomGradient, 2000);})

stop.onmousedown = function() {
clearInterval(interval)
    }
  </script>

ISRAR SEO TOOLS

Auto color generator gradient color maker code

All Calculator

seo page generator

Stylish button generator

Most Popular Tool

other tools

html seo code

About Us

Follow Us

Footer Copyright

Contact Form