Как создать мультиградиент с помощью CSS?

Question

[Dealaxer]

Итак, гурычи!

Возможно ли создание мультиградента в одном блоке div?
То есть, имеем блок , и следует прописать CSS в виде разных градиентов и разных высот этих градиентов в данном блоке без побочных плагинов и других тегов!
Фон из градиентов в одном блоке

Все что видел, это один градиент на один блок. Можно конечно нарисовать картинку с градиентами, и потом вставить как фон, но не хотелось бы прибегать к методам 90-00х.

Всем зачет!

Answer 1

[Dealaxer]

Данной задаче решения нет на css!

Answer 2

[Дмитрий Гончаров]

Тык

Answer 3

[forspamonly2]

именно такую конфигурацию, как у вас, градиентами на одном элементе сделать не получится.

да, можно делать несколько слоёв, да, можно делать несколько зон в одном градиенте, но тут явно несколько блоков с горизонтальными градиентами в разные стороны, которые не получится свести к одному с наложениями или ограничить по высоте.

с другой стороны, если конкретный рисунок не догма (а он, прямо скажем, не шедевр), можно сделать похожий с горизонтальным градиентом в одну сторону и вертикальным поверх. примерно так:

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

если постараетесь подобрать цвета, вполне может получиться довольно похоже на ваш рисунок.

Comments

[Dealaxer]

Спасибо. Картинка была в качестве примера и поэтому он не шедевр)), шедевра гораздо больше))
У вас вариант хороший, но не то что я хотел конечно. Придется еще покопаться.

Answer 4

[Сергей Рыбаков]

Указывайте более 2х цветов в объявлении градиента
Как пример - linear-gradient(to bottom, #39ff08 20%, #ffeb00 40%, #f50000 80%, #000);
Лучше всего применение градиента описано по ссылке htmlbook.ru/CSS3-na-primerakh/lineinyi-gradient , там же пример узора background при помощи градиента.

Upd: написал позднее Дмитрия Гончарова и увидел это опосля.
Последую его примеру и приложу ещё одну ссылку на автоматическое создание градиента, но, как по мне, более удобный - https://www.css-gradient.com

Comments

[Dealaxer]

Может я не так объясняю. Все эти инструменты мне знакомы.
Все эти генераторы дают "один градиент", в котором могут быть разные смешения цветов.
А мне нужно в блоке получить несколько градиентов которые идут друг за другом, причем разной высоты и еще между ними надо поместить простые линии цветовые и не только между ними, а еще и поверх градиентов в некоторых местах. И каждый нижний градиент должен быть без плавного перехода, ровной линией.
Смотрите картинку выше.

Answer 5

[Froggyweb]

написать градиенты через запятую, например так

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);

Comments

[Dealaxer]

В данном случае это один чередующийся градиент, а нужны разные с наложением. На CSS как я понял невозможно сделать то, что на картинке изображено!