Скажите пожалуйста, как можно сделать такие градиенты с помощью css?
-
1colorzilla.com/gradient-editor в помощь– artem55555pCommented 22 нояб. 2017 в 10:05
-
@artem55555p, я сделал градиент подобный первому примеру с таким css кодом background: radial-gradient(closest-corner, #b0ff9f 40%, #9dfa89 40%, #9dfa89 50%, #7af16a 50%, #7af16a 60%, #60ea54 60%, #60ea54 70%, #00b4ff 70%, #00b4ff 100%); но он все равно не соответствует желаемому. как можно сам градиент эллипса расположить к центру вниз/ или обрезать на пополам ?– KekCommented 22 нояб. 2017 в 19:11
Добавить комментарий
|
1 ответ
div {
height: 107px; width: 500px; font: 14px 'Consolas', monospace;
padding:10px; margin:0 auto 5px;} ::selection { background:#f00;color:#fff;
}
.gradien_first {
background: radial-gradient(120% 75% at center bottom, #B0FF9F 27%, #9DFA89 27%, #9DFA89 35%, #7AF16A 35%, #7AF16A 43%, #60EA54 43%, #60EA54 50%, #00B4FF 51%);
}
.gradien_second {
background: radial-gradient(circle, #0074FF 42%, #0671FD 43%, #0671FD 54%, #146CF9 55%, #146CF9 65%, #2C61F1 66%, #2C61F1 77%, #4A55E7 78%, #4A55E7 88%, #634BE0 89%);
color:#fff;
}
<div class="gradien_first">background: radial-gradient(120% 75% at center bottom, #B0FF9F 27%, #9DFA89 27%, #9DFA89 35%, #7AF16A 35%, #7AF16A 43%, #60EA54 43%, #60EA54 50%, #00B4FF 51%);</div>
<div class="gradien_second">background: radial-gradient(circle, #0074FF 43%, #0671FD 43%, #0671FD 55%, #146CF9 55%, #146CF9 66%, #2C61F1 66%, #2C61F1 78%, #4A55E7 78%, #4A55E7 89%, #634BE0 89%);</div>