CSS Linear Gradient with "big steps"

Question

I'm attempting to do a background using linear-gradient, however I want the steps to be "bigger".
For example instead of changing pixel by pixel, a way so that it would change every N pixels.

Is it possible to do it only with CSS?

I'm clueless on how would I achieve this. So I made this SVG example to simulate what I would like to achieve:

http://codepen.io/Goodwine/pen/fqgdB

To do it with CSS I would require to manually insert each, and every color stop, in this case I'm setting this "color-stop"s:

[{r: 0,   g: 0,   b: 0,   a: 1, p: 0.00},
{r: 100, g: 100, b: 255, a: 1, p: 0.25},
{r: 255, g: 200, b: 100, a: 1, p: 0.5},
{r: 255, g: 200, b: 200, a: 1, p: 0.7},
{r: 100, g: 100, b: 100, a: 1, p: 0.9},
{r: 0, g: 0, b: 0, a: 1, p: 1}]

Answer 1

With CSS you can get very similar effects, but not exactly the same

You can have exact pixel-height linear-gradients, but they cannot remove themselves or add more and keep the scheme. A Javascript solution is the only thing that can do exactly what you have. Exact pixel-height linear-gradients in CSS will only show the top lines if the container is shrunk and if the container gets larger than the max value thenthere will be extra space

The exact pixel-height version is the first 50% of the screen in this demo

background-image: /* 22 sections used */
    linear-gradient(#000000,#000000),
    linear-gradient(#141433,#141433),
    linear-gradient(#282866,#282866),
    linear-gradient(#3C3C99,#3C3C99),
    linear-gradient(#5050CC,#5050CC),
    linear-gradient(#6464FF,#6464FF),
    linear-gradient(#8378E0,#8378E0),
    linear-gradient(#A28CC1,#A28CC1),
    linear-gradient(#C1A0A2,#C1A0A2),
    linear-gradient(#E0B483,#E0B483),
    linear-gradient(#FFC864,#FFC864),
    linear-gradient(#FFC878,#FFC878),
    linear-gradient(#FFC88C,#FFC88C),
    linear-gradient(#FFC8A0,#FFC8A0),
    linear-gradient(#FFC8B4,#FFC8B4),
    linear-gradient(#FFC8C8,#FFC8C8),
    linear-gradient(#D8AFAF,#D8AFAF),
    linear-gradient(#B19696,#B19696),
    linear-gradient(#8A7D7D,#8A7D7D),
    linear-gradient(#646464,#646464),
    linear-gradient(#424242,#424242),
    linear-gradient(#212121,#212121);
background-position:0px 0px, 0px 20px, 0px 40px, 0px 60px, 0px 80px, 0px 100px, 
              0px 120px, 0px 140px, 0px 160px, 0px 180px, 0px 200px, 0px 220px, 
              0px 240px, 0px 260px, 0px 280px, 0px 300px, 0px 320px, 0px 340px, 
              0px 360px, 0px 380px, 0px 400px, 0px 420px;
background-size:100% 20px;

More commonly for backgrounds, you can give each color % height. This doesn't have pixel height like you'd want, but it does continue to show all of the colors and fill the container when the size is shrunk/enlarged. This is also limited to the amount of sections originally listed and is not dynamically added to/removed from

This can be seen in the second half of the demo above

background-image: /* 21 sections used */
    linear-gradient(#000000,#000000),
    linear-gradient(#141433,#141433),
    linear-gradient(#282866,#282866),
    linear-gradient(#3C3C99,#3C3C99),
    linear-gradient(#5050CC,#5050CC),
    linear-gradient(#6464FF,#6464FF),
    linear-gradient(#8378E0,#8378E0),
    linear-gradient(#A28CC1,#A28CC1),
    linear-gradient(#C1A0A2,#C1A0A2),
    linear-gradient(#E0B483,#E0B483),
    linear-gradient(#FFC864,#FFC864),
    linear-gradient(#FFC88C,#FFC88C),
    linear-gradient(#FFC8B4,#FFC8B4),
    linear-gradient(#FFC8C8,#FFC8C8),
    linear-gradient(#D8AFAF,#D8AFAF),
    linear-gradient(#B19696,#B19696),
    linear-gradient(#8A7D7D,#8A7D7D),
    linear-gradient(#646464,#646464),
    linear-gradient(#424242,#424242),
    linear-gradient(#212121,#212121),
    linear-gradient(#000000,#000000);
background-position:0% 0%, 0% 5%, 0% 10%, 0% 15%, 0% 20%, 0% 25%, 0% 30%, 0% 35%,
                    0% 40%, 0% 45%, 0% 50%, 0% 55%, 0% 60%, 0% 65%, 0% 70%, 
                    0% 75%, 0% 80%, 0% 85%, 0% 90%, 0% 95%, 0% 100%;
background-size:100% 5%;

Your SVG technique is at the very bottom (below the screen at the start) for comparison

In short, CSS is unable to get exactly the same result as your JS/SVG solution because it cannot calculate window height and set the number of elements based on that

but

CSS does offer some pretty cool tricks (at least to me)

These CSS techniques also let us create vastly more complex things with just one element and some linear-gradients (:

Side note: grad() has some unused parameters

I hope I helped!