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

Custom animated gradient code is not working


Forum|alt.badge.img+2

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 

Best answer by Tom_1842

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

 

View original

3 replies

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 868 replies
  • Answer
  • July 16, 2023

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

 


Forum|alt.badge.img+2

This is awesome thanks! Works perfectly. Any way to only apply this to the first question (which is a “Text/Graphic” type)?


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 868 replies
  • July 16, 2023

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