HTML; $red1 = $_POST['red1']; if ($red1 == '') {$red1 = 255;} if ($red1 > 255) {$red1 = 255;} if ($red1 < 0) {$red1 = 0;} $red = $red1; //preserve original $green1 = $_POST['green1']; if ($green1 == '') {$green1 = 255;} if ($green1 > 255) {$green1 = 255;} if ($green1 < 0) {$green1 = 0;} $green = $green1; $blue1 = $_POST['blue1']; if ($blue1 == '') {$blue1 = 0;} if ($blue1 > 255) {$blue1 = 255;} if ($blue1 < 0) {$blue1 = 0;} $blue = $blue1; $red2 = $_POST['red2']; if ($red2 == '') {$red2 = 255;} if ($red2 > 255) {$red2 = 255;} if ($red2 < 0) {$red2 = 0;} $green2 = $_POST['green2']; if ($green2 == '') {$green2 = 255;} if ($green2 > 255) {$green2 = 255;} if ($green2 < 0) {$green2 = 0;} $blue2 = $_POST['blue2']; if ($blue2 == '') {$blue2 = 255;} if ($blue2 > 255) {$blue2 = 255;} if ($blue2 < 0) {$blue2 = 0;} echo << * { font-family:'Times New Roman',Times,serif; font-size:16px; } html, body { margin:0; padding:0; background-color:#fff; } div {height:1px;} input {width:50px;} input#go {width:auto;} form {padding:10px;} legend, fieldset { border-top:3px solid #ddd; border-right:3px solid #999; border-bottom:3px solid #777; border-left:3px solid #bbb; background-color:#eee; } legend { font-weight:bold; padding:2px 5px 2px 5px; } fieldset { display:inline; padding:10px; text-align:center; } label {font-size:80%;} label[for='red1'], label[for='red2'] {color:#c00; margin-left:10px;} label[for='green1'], label[for='green2'] {color:#090;} label[for='blue1'], label[for='blue2'] {color:#00c;} label[for='go'] {display:block; text-align:center;} #dates {font-size:90%;} .right {text-align:right; height:auto;} HTML; $red_dif = ($red1 - $red2); if ($red_dif > -1) {// result not negative $math_red = -1; $step_red = $red_dif/255; } if ($red_dif < 0) {// result negative $red_dif = ($red2 - $red1); $math_red = 1; $step_red = $red_dif/255; } $green_dif = ($green1 - $green2); if ($green_dif > -1) { $math_green = -1; $step_green = $green_dif/255; } if ($green_dif < 0) { $green_dif = ($green2 - $green1); $math_green = 1; $step_green = $green_dif/255; } $blue_dif = ($blue1 - $blue2); if ($blue_dif > -1) { $math_blue = -1; $step_blue = $blue_dif/255; } if ($blue_dif < 0) { $blue_dif = ($blue2 - $blue1); $math_blue = 1; $step_blue = $blue_dif/255; } for ($i = 1; $i < 256; $i += 1) { //round values for CSS $red_round = round($red,0); $green_round = round($green,0); $blue_round = round($blue,0); echo << '; for ($j = 1; $j < 256; $j += 1) { echo << HTML; } $datemod = date("j F Y", getlastmod()); echo <<
CSS Gradients Demo

Start Colour:
End Colour:


By Chris Hester 5th September 2005 · Updated: $datemod

INFO · Demo 2
HTML; ?>