THESE “IMITATION” GRADIENTS DON’T RELY ON THE CSS GRADIENT PROPERTY at all. Instead, they are built from some simple (and probably impractical) html and a straightforward application of the background-color property. The advantage of this implementation is that it makes pure CSS gradient effects available in IE<10 without filters — as long as you’re willing to put up with a lot of extra HTML and CSS.

Each gradient is made with many, many divs — a hundred or more (though you could get by with fewer, depending on the effect you wanted). Each div is only a few pixels tall or wide, and each has a different background color, defined by the hsl (hue, saturation, luminosity) or hsla (hsl with added alpha opacity) color model. This color model makes it easy to increment the hue, saturation, or luminosity values from one div to the next to create smooth color transitions that mimic the appearance of true CSS gradients.

In Gradient 1 the luminosity values vary from 0 (black) to 100% (white) to create the gradient; 50% is the “normal” luminosity value. The hue in this example is 210 (a sky blue) and the saturation is 100% throughout.

In Gradient 2, the hue, saturation, and luminosity values are the same for all the divs, with their saturation set to 0 (making them grayscale or colorless for any given hue value) and their luminosity set to 100% (so that an opaque div would be white). The alpha opacity, however, varies from 0.0 (transparent) to 1 (opaque) in 0.1 increments. Against a white background, this gradient would be invisible, but it becomes visible if we give its container div a background color (in this case, the same blue hue as Gradient 1). The increasing opacity of the divs slowly obscures more and more of the container div.

Gradient 3 is similar to Gradient 2, but here the divs have a visible color, created by giving them saturation:100% and luminosity:50%.

Gradient 4 has 360 divs, one for each integer hue value. This creates an hsl spectrum or rainbow.

The downside to this method (besides the load of extra HTML and CSS) is that it is pretty tedious to define or edit the hsl values. but with enough patience, you could create any gradient you wanted.