 Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Gradient (Gradient) is an important form of aesthetic beauty, the corresponding mutation. Shape, size, location, direction, color and other visual elements can be graded. In color, hue, lightness, purity also can produce the gradient effect, and will show with rich layers of beauty. Gradient algorithm in this paper, two kinds of color RGB value.

Known: A=50, B=200, A, B were divided into 3 (Step=3), the numerical calculation for each of the (StepN) are the number.

Formula: Gradient = A + (B-A) / Step * N

Note: when programming in order to improve the efficiency and avoid floating-point division, often put on the back, so the formula became: Gradient = A + (B-A) * N / Step

Step=3, can be calculated according to formula Step1=A+ (A-B) /3*1=50+ (200-50) /3=100, Step2=A+ (A-B) /3*2=50+ (200-50) /3*2=150. The principle of the algorithm that is uniformly graded, is very simple, the knowledge of primary school.

Two kinds of color of the gradient is the colors of the two RGB channel separately such calculations, such as two kinds of color are RGB (200,50,0) and RGB (50200,0), calculated by the formula is:

RStep1=RA=RA+(BA-RA)/Step*N=200+(50-200)/3*1=200-50=150

GStep1=GA=GA+(GA-GA)/Step*N=50+(200-50)/3*1=50+50=100

BStep1=BA=BA+(BA-BA)/Step*N=0

So RGBStep1= (150100,0), the same method can be used to find RGBStep2=(100,150,0).

Webpage of Gradient Text Effect come. For example, your webpage HTML has such a code: <span id=myText> you are the most beautiful rainbow < in my sky; /span>, behind add the following code can achieve gradient text. (two colors: generation of graded #c597ff and#73e7a9)

```var ColorA = "#c597ff";
var ColorB = "#73e7a9";

// Color #FF00FF format to Array(255,0,255)
function color2rgb(color)
{
var r = parseInt(color.substr(1, 2), 16);
var g = parseInt(color.substr(3, 2), 16);
var b = parseInt(color.substr(5, 2), 16);
return new Array(r, g, b);
}

// The color of Array (255,0255) format to#FF00FF
function rgb2color(rgb)
{
var s = "#";
for (var i = 0; i <3; i++)
{
var c = Math.round(rgb[i]).toString(16);
if (c.length == 1)
c = '0' + c;
s += c;
}
return s.toUpperCase();
}

{
var str = myText.innerText;
var result = "";
var Step = str.length - 1;

var A = color2rgb(ColorA);
var B = color2rgb(ColorB);

for (var N = 0; N <= Step; N++)
{
for (var c = 0; c <3; c++) // RGB channels were calculated
{
Gradient[c] = A[c] + (B[c]-A[c]) / Step * N;
}
result += "<font color=" + rgb2color(Gradient) +
">" + str.charAt(N) + "</font>";
}
myText.innerHTML = result;
}