2

Скажите пожалуйста, как можно сделать такие градиенты с помощью css? gr

gr2

2
  • 1
    colorzilla.com/gradient-editor в помощь Commented 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%); но он все равно не соответствует желаемому. как можно сам градиент эллипса расположить к центру вниз/ или обрезать на пополам ?
    – Kek
    Commented 22 нояб. 2017 в 19:11

1 ответ 1

4

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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.