Градиентный разделитель между секциями При создании лендингов, часто нужно как-то красиво отделить один блок (секцию) от другого. Давайте сегодня разберем, как сделать плавный переход с полосами затухающих цветов. HTML: <section class="section-red"> <!-- Контент первой секции --> </section> <!-- Разделитель --> <div class="section-divider"></div> <section class="section-white"> <!-- Контент второй секции --> </section> Здесь две секции и пустой div для разделителя. Стили блоков разбирать не будем, перейдем сразу к разделителю: .section-divider { position: relative; height: 54px; / Высота градиентной зоны / overflow: hidden; } Фиксированная высота (3 полосы по 18px) и относительное позиционирование для работы с псевдоэлементами. Создаём полосы: .section-divider::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, #f87171 0px, / светло-красная полоса / #f87171 18px, #fecaca 18px, / ещё светлее / #fecaca 36px, #fef2f2 36px, / почти белая / #fef2f2 54px ); } ■ linear-gradient создаёт градиент сверху вниз. ■ Каждая пара значений задаёт одну полосу (начало и конец). ■ Полосы по 18px каждая, цвета от красного постепенно переходят к почти белому. ■ inset: 0 — псевдоэлемент растягивается на весь родитель. Собственно, все, стильно, модно, молодежно) Пример можно глянуть здесь.