Linear-gradient: как сместить вниз изменение цвета?

309
21 февраля 2018, 08:48

Есть задача - сделать вот такой градиент:

Как сделать собственно изменение от #007234 к #27A42F, я знаю, но изменение это происходит равномерно:

.top { 
	background: linear-gradient(to bottom, #007234, #27A42F); 
	height: 170px; 
}
<div class="top"></div>

А как сделать, чтобы изменение начиналось только в самом низу? Пробовал подставлять проценты, но что-то не очень получилось.

P.S.
В предложенном в ответе варианте появляется тёмная полоса на границе двух цветов:

.top { 
	background: linear-gradient(to bottom, #007234, #007234 80%, #27A42F 100%); 
	height: 170px; 
}
<div class="top"></div>

Answer 1

Можно указать проценты, на которых идет переход. Подробнее тут.

background: linear-gradient(to bottom, #007234, #007234 80%, #27A42F 100%);
READ ALSO
Надо сделать картинки на сайте. Как сделать картинки вместо обычных кружков планет?

Надо сделать картинки на сайте. Как сделать картинки вместо обычных кружков планет?

Надо сделать картинки на сайтеКак сделать картинки вместо обычных кружков планет? Помогите пожалуйста Как вместо кружков планет сделать...

284
Установка devdocs

Установка devdocs

Как установить на локахост https://githubcom/Thibaut/devdocs ? После выполнения команды bundle install консоль ругается на отсутствие gemfile

226