<!--HTML-->
<style>
.xmas-tree {
  --progress: 0%;
  position: relative;
  width: 300px;
  height: 400px;
  display: inline-block;
}

.tree-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

.tree-img.color {
  z-index: 1;
}

.tree-img.grayscale {
  filter: grayscale(100%);
  z-index: 2;
  /* Маска, которая скрывается снизу вверх */
  mask-image: linear-gradient(to top, 
    transparent var(--progress), 
    black var(--progress)
  );
  -webkit-mask-image: linear-gradient(to top, 
    transparent var(--progress), 
    black var(--progress)
  );
}
</style>

<div class="xmas-tree" style="--progress: 0%">
  <img src="https://maxchristmas-store.ru/upload/resize_cache/iblock/151/650_900_1/28497c3t5sg1tiyoz2sh993s74zewx9h.jpg" class="tree-img color" alt="Новогодняя елка">
  <img src="https://maxchristmas-store.ru/upload/resize_cache/iblock/151/650_900_1/28497c3t5sg1tiyoz2sh993s74zewx9h.jpg" class="tree-img grayscale" alt="Елка ЧБ">
</div>

<script>
/**
 * Установить прогресс раскрашивания елки
 * @param {number} percent - от 0 до 100
 */
function setTreeProgress(percent) {
  const tree = document.querySelector('.xmas-tree');
  const progress = Math.max(0, Math.min(100, percent));
  
  // Устанавливаем CSS переменную
  tree.style.setProperty('--progress', `${progress}%`);
  
  console.log(`Прогресс установлен: ${progress}%`);
  return progress;
}

 setTreeProgress(90);  

// Примеры вызова:
// setTreeProgress(0);    // Вся чёрно-белая
// setTreeProgress(100);  // Вся цветная
</script>