Как правильно задать градиент?

Question

[boxFight]

ниже скрин с фигмы

в фигме предупреждение

background: radial-gradient(1981.91% 141.42% at 0% 100%,rgb(80, 71, 64),rgb(92, 67, 89) 16.363%,rgb(56, 43, 63) 42.194%,rgb(23, 23, 23) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */;

А вот что получаю сейчас

https://jsbin.com/liporanafu/1/edit?html,css,output

Comments

[Ankhena]

К той формулировке, в которой вопрос сейчас, ответ будет довольно идиотским: не вращайте его.

Если добавите подробностей: опишете чего ждете (скрин и/или фигма), что не так в результате (скрин, песочницу на jsfiddle или codepen), глядишь и ответы получше пойдут

[boxFight]

Ankhena, вопрос подкоректирован

[Ankhena]

boxFight,
1. Упростить градиент в Фигме
2. Экспортировать как png (svg, возможно, выйдет тяжелее)
3. Подобрать значения градиента опираясь на эту или другую статью css.yoksel.ru/radial-gradients
Например, как советует Полина в ответе.
4. Использовать псевдоэлемент и поворачивать его как хочется.

[xdevelx]

Так это же скорее всего diamond или angular gradient. Не знаю зачем он в фигме и зачем веб дизайнеры его выбирают. В css такого градиента нет.

Answer 1

[Полина]

Можно попробовать так

div {
  border-radius: 32px;
  height: 515px;
  max-width: 1228px;
  width: 100%;
  background: radial-gradient(circle at bottom left, 
    rgb(80, 71, 64), 
    rgb(92, 67, 89) 16.363%, 
    rgb(56, 43, 63) 42.194%, 
    rgb(23, 23, 23) 100%);
  /* Градиент начинается от нижнего левого угла и идет к правому верхнему углу */
}

radial-gradient позволяет указать начальную точку градиента. В вашем случае circle at bottom left, чтобы установить начало в нижнем левом углу