How to create multigraded with CSS?

So, gorici!

Is it possible to create multivalent in one div?
That is, we have block , and you should write CSS in the form of different gradients, and different heights of these gradients in the block without side plugins and other tags!
5afb120869012517550418.jpegBackground of the gradients in the same block

All I see is one gradient on one unit. It is certainly possible to draw a picture with gradients, and then insert as a background, but I would not like to resort to the methods of the 90-00h.

All credit!
June 5th 19 at 21:53
5 answers
June 5th 19 at 21:55
Solution
This problem is no solution at css!
June 5th 19 at 21:57
June 5th 19 at 21:59
exactly the same configuration as you have gradients on the same element do not work.

Yes, you can do multiple layers, Yes, you can do multiple zones in a single gradient, but there is clearly some horizontal gradients in different directions, that cannot be reduced to one that overlaps or limit height.

on the other hand, if a particular figure is not a dogma (and it is, frankly, not a masterpiece), you can do similar with a horizontal gradient at one side and vertical on top. something like this:

https://codepen.io/anon/pen/bMxvmV

if you try to match colors, it can be quite similar to your drawing.
Thank you. The picture was as an example so it is not a masterpiece)), masterpiece much more))
You have the option is good, but not what I wanted of course. Will have to dig. - Hiram_Daugherty commented on June 5th 19 at 22:02
June 5th 19 at 22:01
Specify more than 2 colors in your gradient
As an example - linear-gradient(to bottom, #39ff08 20%, #ffeb00 40%, #f50000 80%, #000);
It is best to apply a gradient describes the link htmlbook.ru/CSS3-na-primerakh/lineinyi-gradient there is an example of a pattern background with a gradient.

Upd: wrote later, Dmitry Goncharov and saw it afterward.
Will follow his example and make another link to the automatic generation of the gradient, but, for me, more comfortable - https://www.css-gradient.com
I can not explain. All of these tools are familiar to me.
All of these generators give the "single gradient", which can be different mixing of colors.
And I need the block to get some gradients going over each other, with different heights and between them it is necessary to place the simple lines of color and not only between them but also on top of the gradients in some places. And each lower gradient should be no smooth transition, smooth line.
See the picture above. - Hiram_Daugherty commented on June 5th 19 at 22:04
June 5th 19 at 22:03
write gradients separated by commas, like so
background: 
 linear-gradient(to top, transparent, #b1b1b1 100%),
 gray repeating-linear-gradient(45deg, transparent, transparent 35px,
 rgba(255, 255, 255, 0.5) 35px, rgba(255, 255, 255, 0.5) 70px);
In this case, one stripe gradient, and need a different overlay. On CSS as I understand it is impossible to do what the picture shows! - Hiram_Daugherty commented on June 5th 19 at 22:06

Find more questions by tags CSSLayoutHTML