Behold, this is the mighty rainbow-text!

Installation

To get started, add following content to your <head> tag:

        <script src="https://haocen.github.io/rainbow-text/src/rainbow-text.js" type="module"></script>

And that's it! Now try to add <rainbow-text>Rainbow!<rainbow-text> somewhere visible on your website and enjoy the flowing colors.
You may also download the src/rainbow-text.js file and host the file anywhere you want.

Basic usage

You can nest rainbow-text in any element accepts text node, with any plain text content between a pair of <rainbow-text></rainbow-text> tags, for example:

You can use it in a list, like this.
You can put in any supported HTML symbols, just like this™.
Subscript, _{no problem}.
Or, any other HTML elements just by nesting in them.
Note: Support for Font Awesome is experimental, use it at your own risk .

Use with Font Awesome

In order to use font awesome, you need to load font awesome CSS into the shadow DOM.
This is required even if font awesome CSS is already loaded because of the shadow DOM styles isolation, following is an example:

        <rainbow-text>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  Hello font awesome <i class="fa-brands fa-fort-awesome"></i>
</rainbow-text>

Will give you:

Hello font awesome

Customization

You can assign CSS value to following CSS variable names:
--animation-duration (default to "2s")
--animation-timing-function (default to "linear")
--animation-iteration-count (default to "infinite")
--animation-direction (default to "normal")
--animation-fill-mode (default to "none")
--animation-play-state (default to "running")
in order to fine tune the experience.
For example:

Make the rainbow flowing faster.
Make the rainbow flowing slower.
Make the rainbow static.

You can also set attribute flow-direction (default to "left-to-right") on the element:
For example:

Make the rainbow flowing from left to right, this is the default behavior.
Make the rainbow flowing from right to left is also possible.

Bugs and features