This app interactively generates CSS linear or radial gradients and lists the code, so the code can be pasted into a web page. CSS gradients are not as versatile as SVG ones, but are fine for simple gradients.
The Control Panel has two color inputs, each of which immediately updates the gradient on change.
Here is a typical appearance:
The linear gradient can be horizontal rather than vertical:
Of course, the linear and radial gradients are not required to have the same colors.
In the Control Panel, the left text box contains the gradient code, followed by the two color inputs.
The first checkbox, if checked, gives a horizontal gradient,
while the second checkbox if checked creates a radial gradient.
The last two text inputs set the stops for the gradient colors.
To use it click here
Here is the code:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”
http://www.w3.org/1999/xhtml”>
<head profile=”
http://gmpg.org/xfn/11″>
<title>Gradient Generator</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15px Arial;}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
</style>
</head>
<body>
<input type=”text” id=”t1″ name=”t1″ value=”” style=”width: 800px” /> <input type=’color’ id=’color1′ value= simple color onchange=’gradGen();’ /> <input type=’color’ id=’color2′ value= simple color onchange=’gradGen();’ /> <input type=”checkbox” id=”ch1″ style=”width: 15px” name=”ch1″ value=” ” />Horizontal <input type=”checkbox” id=”ch2″ style=”width: 15px” name=”ch2″ value=” ” />Radial <input type=”text” id=”t2″ name=”t2″ value=”1%” style=”width: 40px” /> <input type=”text” id=”t3″ name=”t3″ value=”85%” style=”width: 40px” />
<di id=”dlin” style=”position: absolute; top: 10%; left: 20px; width: 500px; height: 500px; border: 2px solid black;
background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ffffff),color-stop(1, #ffffff));
background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
background-image: -o-linear-gradient(top, #ffffff, #ffffff);
background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
background-image: linear-gradient(top, #ffffff, #ffffff);”>
</di>
<di id=”drad” style=”position: absolute; top: 10%; left: 550px; width: 500px; height: 500px; border: 2px solid black; border-radius: 500px;
background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #ffffff 10%, #ffffff 70%);
background-image: -webkit-radial-gradient(center center, circle closest-corner, #ffffff 10%, #ffffff 70%);
background-image: -ms-radial-gradient(center center, circle closest-corner, #ffffff 10%, #ffffff 70%);
background-image: -o-radial-gradient(center center, circle closest-corner, #ffffff 10%, #ffffff 70%);
“>
var brsr = “”;
if (navigator.userAgent.toLowerCase().indexOf(‘msie’) != -1 || navigator.userAgent.toLowerCase().indexOf(‘trident’) != -1 || navigator.userAgent.toLowerCase().indexOf(‘edge’) != -1) brsr = “ms”;
if ( navigator.userAgent.toLowerCase().indexOf(‘safari’) != -1 || navigator.userAgent.toLowerCase().indexOf(‘chrome’) != -1) {
brsr = “webkit”;
} else if ( navigator.userAgent.toLowerCase().indexOf(‘opera’) != -1) {
brsr = “o”;
} else if ( navigator.userAgent.toLowerCase().indexOf(‘firefox’) != -1) {
brsr = “moz”;
}
function gradGen() {
var direc = “top”;
var rad = false;
if (document.getElementById(“ch1”).checked) direc = “left”;
if (document.getElementById(“ch2”).checked) {
rad = true;
} else {
rad = false;
}
if (rad) {
if (brsr == “moz”) {
var grd = ‘-moz-radial-gradient(center 45deg, circle closest-corner,’ + document.getElementById(“color1”).value + ‘ ‘ + document.getElementById(“t2”).value + ‘,’ + document.getElementById(“color2”).value + ‘ ‘ + document.getElementById(“t3”).value + ‘)’;
document.getElementById(“drad”).style.backgroundImage = grd;
document.getElementById(“t1”).value = ‘style.backgroundImage = “‘ + document.getElementById(“drad”).style.backgroundImage + ‘”;’;
} else if (rad) {
grd = ‘ -‘ + brsr + ‘-radial-gradient(center center, circle closest-corner,’ + document.getElementById(“color1”).value + ‘ ‘ + document.getElementById(“t2”).value + ‘,’ + document.getElementById(“color2”).value + ‘ ‘ + document.getElementById(“t3”).value + ‘)’;
document.getElementById(“drad”).style.backgroundImage = grd;
document.getElementById(“t1”).value = ‘style.backgroundImage = “‘ + document.getElementById(“drad”).style.backgroundImage + ‘”;’;
}
}
if (! rad) {
grd = ‘ -‘ + brsr + ‘-linear-gradient(‘ + direc + ‘, ‘ + document.getElementById(“color1”).value + ‘,’ + document.getElementById(“color2”).value + ‘)’;
document.getElementById(“dlin”).style.backgroundImage = grd;
document.getElementById(“t1”).value = ‘style.backgroundImage = “‘ + document.getElementById(“dlin”).style.backgroundImage + ‘”;’;
}
var t1 = document.getElementById(“t1”);
t1.focus();
t1.select();
}
</body></html>
The gradient statements are browser specific, so a different one is needed for each browser. However, most differ only in a browser prefix.
Therefore, I created a variable brsr which was incorporated in general statements. A variable grd was created to hold the gradient string. For a linear gradient:
grd = ‘ -‘ + brsr + ‘-linear-gradient(‘ + direc + ‘, ‘ + document.getElementById(“color1”).value + ‘,’ + document.getElementById(“color2”).value + ‘)’;
direc is either top or left, depending on whether the gradient is vertical or horizontal.
A division was then loaded with the gradient and a text input given the value of grd and selected:
document.getElementById(“dlin”).style.backgroundImage = grd;
document.getElementById(“t1”).value = ‘style.backgroundImage = “‘ + document.getElementById(“dlin”).style.backgroundImage + ‘”;’;
}
var t1 = document.getElementById(“t1”);
t1.focus();
t1.select();
For radial gradients, Firefox differs:
if (brsr == “moz”) {
var grd = ‘-moz-radial-gradient(center 45deg, circle closest-corner,’ + document.getElementById(“color1”).value + ‘ ‘ + document.getElementById(“t2”).value + ‘,’ + document.getElementById(“color2”).value + ‘ ‘ + document.getElementById(“t3”).value + ‘)’;
} else if (rad) {
grd = ‘ -‘ + brsr + ‘-radial-gradient(center center, circle closest-corner,’ + document.getElementById(“color1”).value + ‘ ‘ + document.getElementById(“t2”).value + ‘,’ + document.getElementById(“color2”).value + ‘ ‘ + document.getElementById(“t3”).value + ‘)’;
rad is a boolean variable determined by the state of the second checkbox.
The following code determines the browser:
if (navigator.userAgent.toLowerCase().indexOf(‘msie’) != -1 || navigator.userAgent.toLowerCase().indexOf(‘trident’) != -1 || navigator.userAgent.toLowerCase().indexOf(‘edge’) != -1) brsr = “ms”;
if ( navigator.userAgent.toLowerCase().indexOf(‘safari’) != -1 || navigator.userAgent.toLowerCase().indexOf(‘chrome’) != -1) {
brsr = “webkit”;
} else if ( navigator.userAgent.toLowerCase().indexOf(‘opera’) != -1) {
brsr = “o”;
} else if ( navigator.userAgent.toLowerCase().indexOf(‘firefox’) != -1) {
brsr = “moz”;
}
Tips & Tricks 