CSS Rainbow Text

Features

• A rainbow gradient clipped to the text with `background-clip: text`; the output is one CSS rule
• Two to twelve colour bands, with stop positions written out so the layout is deterministic
• Directions: left to right, top to bottom, diagonal 135°, right to left
• Saturation and lightness are adjustable, so light and dark designs both have a usable setting
• The `-webkit-` prefixed declarations are included, so Safari and older Chrome render it too
• The preview updates live; copy when you are happy
• The output carries the `.rainbow-text` selector, ready to paste into a stylesheet
• Everything runs locally in your browser; your text is not uploaded

How to use

1. Type a few characters into the input above
2. Choose the gradient direction and how many colour bands
3. Adjust saturation and lightness until the weight looks right
4. Copy the CSS onto your heading

FAQ

Why do I see a rectangle of colour over the words, or no words at all?

Both come from a missing declaration, and for opposite reasons. A rectangle of colour means the background was not cut to the text — the `background-clip` declaration is missing (including the `-webkit-` prefixed one, which is the only one Safari and older Chrome honour). Invisible text means the text colour never moved out of the way — `color: transparent` is missing, so an opaque colour sits on top of the gradient and the area looks blank. The full rule shown above includes all of them.

Why not colour each character separately?

Per-character colouring means wrapping every character in a `<span>`, which is changing the HTML structure. These generators return a piece of CSS: the preview text is written by the page with `textContent`, and the module neither has nor should have access to the DOM. `background-clip: text` is the standard answer, and its output lasts longer — a CSS rule plus a class name works on any heading, while the span approach has to be redone whenever the copy changes or the content comes from a CMS.

The colour disappears when I wrap the text in a span. Why?

Because the text has to stay on the element carrying the class. `background-clip: text` cuts that element’s own background, and text inside a child is outside the cut, so it keeps its own colour — and `color: transparent` does not help, since what is missing is the parent’s background under those glyphs. So `<h1 class="rainbow-text">Title</h1>` is right, and adding a `<span>` inside it is not.