Custom animated gradient code is not working | XM Community
Skip to main content

I want to use this code for my main page:

```

@keyframes movingGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

body { background-image: linear-gradient(to top left, #FFD23F, #E5BEED); background-size: 150% 150%; animation: movingGradient 5s ease infinite; /*background-image: linear-gradient(to top right, #E5BEED, #FFD23F);*/ color: #272727; font-family: Arial, sans-serif; line-height: 1.6; margin-top: 2rem; }

```

Can I at least get the gradient in Qualtrics? I tried copy pasting this to Custom CSS and it does not work 

#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%;
}
}

 


Leave a Reply