Как воспроизвести этот круговой градиент в CSS из дизайна Figma?

Я пытаюсь восстановить круговой градиент в CSS, который соответствует тому, что я разработал в Figma. Вот изображение для справки:

Круговой градиент

Градиент, который у меня есть в Figma, определяется так:

background: linear-gradient(206.12deg, rgba(231, 51, 255, 0.5) -74.73%, rgba(207, 67, 255, 0.483696) 6.69%, rgba(0, 204, 255, 0.5) 108.36%);

Я понимаю, что линейный градиент не подойдет для круговой формы, поэтому я пытаюсь преобразовать это в радиальный градиент в CSS, но мне трудно добиться того же эффекта.

Кто-нибудь знает, как я могу воспроизвести этот градиентный эффект в виде круга в CSS? Буду признателен за любые советы или предложения!

Спасибо!

Я пытался преобразовать этот линейный градиент в радиальный градиент, чтобы имитировать круговой вид, но не получаю тот же эффект. Вот CSS, который я попробовал:

background: radial-gradient(
  circle,
  rgba(231, 51, 255, 0.5) 10%,
  rgba(207, 67, 255, 0.48) 40%,
  rgba(0, 204, 255, 0.5) 100%
);

Вот мой fiddle

Вы можете использовать тот же background, который определен в figma, с некоторыми незначительными корректировками. Добавьте ниже свойства, и он будет выглядеть одинаково

background: linear-gradient(206.12deg, rgba(231, 51, 255, 0.5) -74.73%, rgba(207, 67, 255, 0.483696) 6.69%, rgba(0, 204, 255, 0.5) 108.36%);
  filter: blur(50px);
  transform: rotate(300deg)

Ниже приведен рабочий пример, и если я что-то не понял или упустил, дайте знать.

.circle-gradient {
  width: 300px;
  /* Настройте по необходимости */
  height: 300px;
  /* Настройте по необходимости */
  background: linear-gradient(206.12deg, rgba(231, 51, 255, 0.5) -74.73%, rgba(207, 67, 255, 0.483696) 6.69%, rgba(0, 204, 255, 0.5) 108.36%);
  border-radius: 50%;
  filter: blur(50px);
  transform: rotate(300deg)
}

<div class="circle-gradient">

</div>

</div><div class="s-prose js-post-body" itemprop="text">

.circular-gradient {
width: 300px;

height: 300px;

background: radial-gradient(circle at center,

rgba(255, 255, 255, 1) 0%,
enter code here
rgba(240, 240, 255, 1) 25%,

rgba(230, 230, 255, 1) 50%,
rgba(220, 220, 255, 1) 75%,
rgba(210, 210, 255, 1) 100%

);
}

Это должно сработать

</div>

Ответ или решение

Для воссоздания кругового градиента в CSS, который соответствует вашему дизайну в Figma, можно использовать свойство background. Несмотря на то, что исходный градиент задан как линейный, вы можете применить некоторые стилистические приемы, чтобы добиться желаемого результата.

Исходный градиент из Figma

Ваш оригинальный линейный градиент выглядит следующим образом:

background: linear-gradient(
    206.12deg,
    rgba(231, 51, 255, 0.5) -74.73%,
    rgba(207, 67, 255, 0.483696) 6.69%,
    rgba(0, 204, 255, 0.5) 108.36%
);

Решение с использованием линейного градиента и дополнительных свойств

Чтобы воспроизвести аналогичный эффект кругового градиента, можно использовать линейный градиент с фильтром и трансформацией. Вот пример CSS, который позволит вам добиться желаемого результата:

.circle-gradient {
    width: 300px; /* Настройте по необходимости */
    height: 300px; /* Настройте по необходимости */
    background: linear-gradient(
        206.12deg,
        rgba(231, 51, 255, 0.5) -74.73%,
        rgba(207, 67, 255, 0.483696) 6.69%,
        rgba(0, 204, 255, 0.5) 108.36%
    );
    border-radius: 50%; /* Округление для создания круга */
    filter: blur(50px); /* Смягчение градиента */
    transform: rotate(300deg); /* Поворот для создания нужного эффекта */
}

HTML Структура

Ваша HTML-структура для использования этого стиля будет выглядеть так:

<div class="circle-gradient"></div>

Объяснение

1. border-radius: 50%; — это свойство делает элемент кругом.
2. filter: blur(50px); — размытие добавляет мягкости к градиенту, что может помочь достичь желаемого эффекта, чтобы он выглядел более круговым и менее резким.
3. transform: rotate(300deg); — это свойство позволяет поворотом изменить внешний вид градиента, чтобы он соответствовал дизайну в Figma более точно.

Заключение

С помощью этих настроек вы сможете воссоздать круговой градиент из вашего дизайна в Figma. Выполнение этих шагов должно дать вам эффект, аналогичный тому, что вы видите в вашем Figma проекте. Если у вас есть дополнительные вопросы или нужны разъяснения, не стесняйтесь спрашивать!