Почему градиент с переходом в прозрачный цвет создаёт черноту?

#css #svg

Есть два градиентных круга, в одном я переход делаю к прозрачному цвету transparent,
в другом к тому же цвету, что и фон pink.

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

Что мне надо.

Я хочу сгенерировать фон из цветных пятен-кругов, которые градиентно исчезают.

Но если я делаю переход в transparent то там куча черноты получается, что мне не
подходит. А выбрать фиксированный цвет куда переходит градиент я не могу, так как пятна
генерируются на случайном месте, и в случае фиксированного крайнего цвета они будут
перекрывать друг друга, что можно посмотреть на втором блоке примера, а мне надо что
бы они просвечивали. На первом блоке они просвечивают, но там появилась чернота.

Как это можно сделать и можно ли вообще?







    

Ответы

Ответ 1

Это можно исправить с помощью stop-opacity.
Color transparent меняем на blue, а дальше контролируем прозрачность с помощью stop-opacity:



svg {
  background-color: pink;
}