Beautiful Background CSS

I found this on a CSS site and tweaked it a little for Retool and the results are gorgeous :star_struck:

main {
	background: linear-gradient(-45deg, #ee7752, {{ theme.primary }}, #23a6d5, {{ theme.secondary }});
	background-size: 400% 400%;
	animation: gradient 30s ease infinite;
	height: 100vh;
}

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

It slowly cycles through the gradients while following the theme's coloring. I have two static values, but you could use all theme values if you wanted.

gradient.webm

9 Likes

:star_struck:

too gorgeous to actually get anything done, big temptation for my dispersed mind!

1 Like