@Dealaxer

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

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

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

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

Всем зачет!
  • Вопрос задан
  • 144 просмотра
Решения вопроса 1
@Dealaxer Автор вопроса
Данной задаче решения нет на css!
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
@forspamonly2
именно такую конфигурацию, как у вас, градиентами на одном элементе сделать не получится.

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

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

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

если постараетесь подобрать цвета, вполне может получиться довольно похоже на ваш рисунок.
Ответ написан
Указывайте более 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
Ответ написан
@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);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Blogman Оренбург
от 20 000 до 60 000 руб.
Webit Москва
До 90 000 руб.
22 окт. 2018, в 02:01
10000 руб./за проект
21 окт. 2018, в 22:38
1200 руб./за проект
21 окт. 2018, в 17:05
5000 руб./за проект