Достижение плавного перехода градиента на переднем плане в фон. ⇐ CSS

[Anonymous]

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

Плавное затухание радужного градиента, сгенерированного CSS .контейнер { положение: относительное; ширина: 500 пикселей; высота: 300 пикселей; переполнение: скрыто; фон: повторяющийся линейный градиент (45 градусов, #f00, #f00 10 пикселей, #0f0 10 пикселей, #0f0 20 пикселей); } .rainbow-overlay { позиция: абсолютная; верх: 25%; слева: 25%; ширина: 50%; высота: 50%; фон: линейный градиент (вправо, фиолетовый, индиго, синий, зеленый, желтый, оранжевый, красный); маска: линейный градиент(прозрачный 10%, черный 20%, черный 80%, прозрачный 90%) /* вертикальный */ , линейный градиент(вправо, прозрачный 10%, черный 20%, черный 80%, прозрачный 90%) /* горизонтальный */; } К сожалению, текущая реализация, использующая свойство mask с linear-gradient, приводит к объединению или слиянию двух градиентов, а не к желаемому пересечению.

Есть ли способ добиться эффекта плавного затухания? Мы будем очень признательны за любые идеи или альтернативные подходы.