Mesh Gradient Animation Only Using Css

[nonja]

.stApp > header {
    background-color: transparent;
}

.stApp {

    background-color:#99eeff;
    background-image:
    radial-gradient(at 29% 74%, hsla(257,85%,0%,1) 0px, transparent 50%),
    radial-gradient(at 31% 83%, hsla(148,87%,0%,1) 0px, transparent 50%),
    radial-gradient(at 77% 7%, hsla(297,69%,0%,1) 0px, transparent 50%),
    radial-gradient(at 19% 18%, hsla(261,77%,0%,1) 0px, transparent 50%),
    radial-gradient(at 70% 36%, hsla(10,87%,0%,1) 0px, transparent 50%),
    radial-gradient(at 5% 0%, hsla(85,72%,0%,1) 0px, transparent 50%),
    radial-gradient(at 59% 57%, hsla(191,76%,0%,1) 0px, transparent 50%);
    background-size: 150% 150%;
    animation: my_animation 10s ease infinite;
}

@keyframes my_animation {
    0% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

Animates mesh gradient seemlessly
python code:

st.title('Gradient Background')
st.write('Look at the pretty shifting background')

with open('wave.css') as f:
    css = f.read()

st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)

Use this website to create a mesh:

CSS mesh gradients generator: Mesher Tool by CSS Hero

replace in place of the background image code

[nonja]

Sharing it here because this took me an hr and chatgpt to figure out, because i didnt want to use js or html