#Wrapper appears to work well as a selector, and I found a codepen that looked to work for a moving gradient. I added some of your colors to the below:
#Wrapper {
background: linear-gradient(to top left, #FFD23F, #E5BEED);
background-size: 150% 150%;
animation: gradient 5s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
This is awesome thanks! Works perfectly. Any way to only apply this to the first question (which is a “Text/Graphic” type)?
To apply this to just one page, include the CSS in the HTML of any question on that page. Use the Rich Content Editor's HTML/Source view "<>" to update the Question text of the Text/Graphic question with the below:
<style type="text/css">
#Wrapper {
background: linear-gradient(to top left, #FFD23F, #E5BEED);
background-size: 150% 150%;
animation: gradient 5s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
Click to write the question text
Or, to apply it to just one question, try changing the selector to a QID and add the CSS to the Style section of the Look & Feel:
#QID1 {
background: linear-gradient(to top left, #FFD23F, #E5BEED);
background-size: 150% 150%;
animation: gradient 5s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}