Как преобразовать svg radialGradient в css radial-gradient()?

Question

[vokose8504]

В фигме есть нарисованный круговой градиент, а также css код, который она предлагает, как аналог.
Насколько я могу судить - css код правильный, но результат его использования сильно отличается от svg. Пример прикрепил ниже.
Нашел объяснение, что это может быть из-за особенностей расчета радиуса в css и svg. Но мне эта информация не особо помогла.
Просьба объяснить, как получить хотя бы примерный вид c помощью radial-gradient()

Comments

[lagudal]

Если нужно точно как в дизайне, я бы не заморачивался с расчетами а просто подставил бы целиком эту svg в url для background-image.

background-image: url("data:image/svg+xml,%3Csvg width='65' height='65' viewBox='0 0 65 65' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='32.601' cy='32.2966' r='32.0866' fill='url(%23paint0_radial_1_183)'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_1_183'%3E%3Cstop offset='0%25' stop-color='%23FF0000'/%3E%3Cstop offset='100%25' stop-color='%23D9D9D9' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");

Answer 1

[marmok1932]

- Увеличить радиус CSS-градиента. Чем больше радиус, тем ближе он будет к SVG-градиенту. Однако это может привести к тому, что градиент будет выходить за пределы элемента.

- Использовать значение at() для указания центра градиента. Это значение позволяет указать координаты центра градиента в относительных единицах. Например, at(0 100%) означает, что центр градиента будет находиться в 100% от высоты элемента.

- Использовать значение stop-opacity() для изменения прозрачности градиента по мере удаления от центра. Это позволит сделать градиент более плавным.