Задать вопрос
@Dealaxer

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

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

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

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

Всем зачет!
  • Вопрос задан
  • 1940 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 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);
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы
04 дек. 2024, в 12:42
7000 руб./за проект
04 дек. 2024, в 12:26
5000 руб./за проект
04 дек. 2024, в 12:04
10000 руб./за проект