The same principles apply. If you are familiar with css, you can see from the example which tags/classes to grab for your background. The element to grab is not body in this case; it’s .stApp (with an extra rule to remove the header if you want). The example shows how to include plain css. If you need to include any <script> .... </script> then you will need to use st.components.v1.html('<script>...</script>') instead.
To illustrate, I changed your css to begin with:
.stApp > header {
background-color: transparent;
}
.stApp {
margin: auto;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
overflow: auto;
background: linear-gradient(315deg, #4f2991 3%, #7dc4ff 38%, #36cfcc 68%, #a92ed3 98%);
animation: gradient 15s ease infinite;
background-size: 400% 400%;
background-attachment: fixed;
}
I put it in a file called wave.css
Then in my app, I did:
import streamlit as st
st.title('A Random App')
st.write('Look at the pretty waves')
with open('./files/wave.css') as f:
css = f.read()
st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)
