#RAINBOW GRADIENT BACKGROUND CODE#

#RAINBOW GRADIENT BACKGROUND CODE#

We also declared a transition to smooth this movement a little bit! Here's the final code and result:įont-size: 10vw /* make our h1 tag larger */ font-family: sans-serif /* choosing our font */ background: linear-gradient(to right, rgba( 255, 215, 255, 0) 0%, rgba( 225, 255, 255, 0.5) 20%, rgba( 255, 255, 255, 0) 61%), linear-gradient( rgb( 97, 183, 217) 52%, rgb( 224, 246, 255) 60%, rgb( 78, 99, 132) 61%) /* you can change the colors based on your preference */ background-clip: text /*it defines how far the background should extend within an element, here we set it to text */ You're free to change that values and get your desired result as well!

We defined a custom animation named wave here, which will be run every 2 seconds, and during this time, it will change our background-position 50vw on the x-axis and 10px on the y-axis. * add this line */ transition: all 0.4s ease We use transparent to use the background as our text fill */ animation: wave 2000ms ease alternate infinite * specifies the fill color of text characters. *it defines how far the background should extend within an element, here we set it to text */ * you can change the colors based on your preference */ background-clip: text

* make our h1 tag larger */ font-family: sans-serif

Rainbow gradient background