not required at all to use this code, but will hopefully go a long way in showing how this actually works, and understanding how some piece of code actually works goes quite a long way in allowing you to modify it more to your specifications, or use parts of that code in other things.

the first several lines are a css comment; they're not required for the css to work at all and won't be rendered in any way, but i require my comments to be left as they are when my code is used by other people! if you want to add your own comments to your css, anything between a /* and */ the css file will not render at all. (you can use this not only for actual comments, but to also wrap around css code you want to temporarily 'disable' if you need to troubleshoot something.)
the first line after the comment that sets the color to #000 is a fallback color for older browsers that don't support some or all of the code that gets used next, so they don't get left with invisible or default-color text. #000 is black; you can set this to whatever hex color you want.

now the real fun begins! @supports tells the browser to check whatever is next in parenthesis for if the browser is compatible with the parenthesis text. if the browser understands the parenthesis text, it will go on to render whatever is contained in the {} brackets. if the browser DOESN'T understand what's in the parenthesis, or is too old to even know what @supports is at all, it simply skips this section entirely and will use the fallback color we specified before.
display: inline tells the browser to always set this text to render right next to other text, and sit on the same line.
background sets the background color, which will be a color gradient of the colors we specify. to right tells the gradient to render from left to right horizontally, and the following hex codes are simply the colors in order we want the gradient to be. these can be changed to whatever you want, and can be changed in number as well, from two to however many you want! the inline display setting specified previously will force this gradient show in its entirety only over the text; otherwise it will cover the entire browser and only show a tiny portion of the full gradient over your text.
next, setting the color to transparent will allow the gradient to show through the text as well. normally this would then make the text invisible, but is required for the last part to work....
finally we have reached -webkit-background-clip: text! what background-clip does is the heavy lifting for our text effect: it first masks and hides the text entirely, including all the effects we just specified before, then holepunches the text shapes out of this mask layer so only the text is visible. normally the text would just still show as normal, but when combined with background-clip the transparent text color allows the background gradient to show through the text while otherwise hiding it.
the webkit part is a browser engine prefix, meaning only browsers that use this particularly coded way of putting web pages together will be able to use this effect. we use the browser prefix part of the code for the @supports check to force our entire fancy gradient text to be ignored if the -webkit-background-clip isn't supported. not doing this will mean all the other parts of our code that are supported by many more browsers will get read and rendered, but the text will only half-render and will be unreadable color chunks! -webkit-background-clip part is just as necessary as all the other effects for the fancy text to fully work, so we want any browsers that don't support this part to use the fallback color instead of being an unreadable mess, which is why we make them check that part for compatibility as the least supported of all our effects.

and so the text gets rendered as rainbow! or whatever colors you chose in your gradient. they don't have to be rainbow at all, and there are many fun gradient effects to try.