Как плавно смешать фон DIV от одного к другому. Постепенное исчезновение/появление ⇐ CSS

[Anonymous]

У меня есть простая страница с несколькими . У каждого немного разный фон. Переход от одного к другому довольно резок для глаз:
[img]https://i. sstatic.net/A2MrCWN8.png[/img]

Есть ли способ совместить два фона? Например, один постепенно исчезает, а другой появляется и потенциально контролирует, сколько пикселей происходит смешивание?
Полный пример здесь:

Код: Выделить всё

.sectionA {
height: 200px;
min-width: 100vw;
background-image: url("https://media.istockphoto.com/id/1423098321/vector/dark-purple-edge-glow-modern-gradient-abstract-blend-background.jpg?s=612x612&w=0&k=20&c=FpuUIzzyi8ryd3lXnArlafHYM_Bip5otkOJAa7T4hg4=");
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
}

.sectionB {
height: 200px;
min-width: 100vw;
background-image: url("https://media.istockphoto.com/id/1434782845/vector/purple-light-defocused-blurred-motion-gradient-abstract-background-vector.jpg?s=612x612&w=0&k=20&c=XdziynSGjaoVCLk9LI1A70ibGgpUi2IZ23PtkOWdjOM=");
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/785 ... out-fade-i