Estoy trabajando en un pequeño proyecto. Se supone que la página pasa de estar borrosa a una imagen clara. El problema es que la imagen nunca se aclara. Se mantiene en el mismo nivel de desenfoque (30Px). Todo lo demás ahora funciona correctamente.

No estoy seguro de qué más agregar a la pregunta.

 CSS: @import url('https://fonts.googleapis.com/css?family=Ubuntu'); * { box-sizing: border-box; } body { font-family: "Ubuntu", sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .bg { background: url("4.jpg") no-repeat center center/cover; position: absolute; top: -300px; left: -30px; width: calc(100vw + 50px); height: calc(100vw + 30px); z-index: -1; filter: blur(30px); } #text { font-size: 50px; color: #fff; } JS: loadText = document.getElementById('text'); const bg = document.querySelector('.bg'); let load = 0; const int = setInterval(blurring, 100); function blurring() { load++ console.log(load) if (load > 99) { clearInterval(int) } loadText.innerText = `${load}%` loadText.style.opacity = scale(load, 0, 100, 1, 0) } function scale (number, inMin, inMax, outMin, outMax) { return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin; } blurring() The image starts blurred, but never becomes clear. This count from 0% to 100% functions properly. The opacity fade is working properly as well. The only thing not functioning is the image becoming clear.