Gradient Text Generator

Each character gets a coloured square, and which colour it gets depends on the letter itself — not on where it sits in your word. So abcdef comes out as a clean spectrum, a🟥b🟧c🟨d🟩e🟦f🟪, while gradient comes out scrambled: g🟥r🟪a🟥d🟩i🟨e🟦n🟧t🟧. That distinction is the whole story of this page, and the section below sets it out.

How the Gradient Text Generator Works

Six squares are in rotation — 🟥 🟧 🟨 🟩 🟦 🟪, from the Geometric Shapes Extended block — and each letter is permanently assigned one. Lowercase starts at red and steps through in alphabetical order: a🟥 b🟧 c🟨 d🟩 e🟦 f🟪, then repeats from g. Digits do the same from zero.

Uppercase runs the same six-step loop offset by two, starting at yellow: A🟨 B🟩 C🟦 D🟪 E🟥 F🟧. Mixing case therefore changes which colours appear, though not the underlying rule.

Where a Colour-Coded Line Fits

• Short hype tags, category chips and playlist headings that need colour rhythm — the text effect works on a heading, not on a paragraph.
• Milestone counts and serials, where the repeat ties a set of items together — copy one, adjust the number, and the colours follow the digits.
• Social media handles and stickers with a playful, modular feel — the places a rainbow text image or a CSS text colour cannot reach.

Shaping the Line

1. Keep it to 1–6 words for a clean, readable band of color.
2. Mixing case changes the palette, because uppercase is offset by two steps — the same letter in caps and lowercase gets different colours.
3. Use punctuation sparingly: it is not in the map, so it breaks the cadence. Preview the output before you paste it.

Palette Notes

• The loop is deterministic, so a given word always produces the same colours — useful if you want a name to look identical every time you type it.
• These are emoji, so each platform draws its own squares. The hues are close enough to read as the same six everywhere, but the exact shades shift between Apple, Google and Microsoft.
• Dense paragraphs feel busy—treat the gradient as a highlight, not a body style.

Which Toolbar Options Work With Gradient

Every character already carries a full-colour emoji, so the line is saturated before you add anything. That narrows the useful set sharply.

• Separator is worth setting despite the crowding, because the squares run words together: c🟨o🟨l🟪o🟨r🟪 c🟨o🟨d🟩e🟦. Pipe and Slash are tall enough to be seen against emoji; No Space goes the other way and closes the gap deliberately.

꒰꒱ Wrap works better than most controls here because the frame sits outside the run. ▓▒░ … ░▒▓ and ■□■□ … □■□■ are block shapes rather than pictures, so they hold their own beside coloured squares without competing.

✦ Symbol and ❋ Pattern both insert more emoji into a line that is already half emoji. None of the six squares is in the Symbol picker, so anything you add is a different shape and a different palette.

Aa Mix Font removes the squares entirely. It restyles your selection in the input box, and a restyled letter is not one of the plain characters this map looks up, so nothing is appended to it.

⏰ Recent holds your last picks, and 🖼 Export Image saves the line as PNG, JPG or WebP — worth having, since the squares are the part most likely to be drawn differently elsewhere.

This Is Not a Gradient

Worth saying first, because the name sets an expectation the output does not meet.

A gradient is a smooth transition — one colour blending into the next across a shape. What this page does is assign a fixed colour to each letter of the alphabet and stamp it after that letter wherever it appears. The colour is a property of the letter, not of its position in your word.

The consequence is easy to see. abcdef produces a clean spectrum because those six letters happen to be the six colours in order:

a🟥b🟧c🟨d🟩e🟦f🟪

To create gradient text with a real fade you would need the letters in colour order, which no word gives you. Any real word does not. colour lands on c🟨o🟨l🟪o🟨u🟨r🟪 — three of one shade and no progression at all — and gradient gives g🟥r🟪a🟥d🟩i🟨e🟦n🟧t🟧, which starts red, jumps to purple, and goes back to red.

So what the tool actually produces is a per-letter colour code: consistent, deterministic, and repeatable, but arranged by spelling rather than by any visual logic. That is genuinely useful for some things — a name always looks the same, and repeated letters always match — and it is not what most people mean by a gradient.

What a Real Colour Gradient Needs

Colour is not something a character carries. A letter is a reference to a shape; the app decides what colour to paint it, which is why the same text is black in one place and white in another.

Emoji are the exception, and a narrow one: an emoji has fixed colours baked into the platform's artwork. That is why a coloured square can appear in plain text at all — and also why you cannot choose the colour, change it, or blend one into the next. Six fixed squares is the entire palette available, and blending is not possible in principle.

For an actual gradient you need something that paints pixels:

• On a web page, CSS does it in two lines — a linear-gradient background with background-clip: text and transparent fill. Any colours, any angle, a genuine blend.
• In a design tool, a gradient fill applied to the type, exported as an image.
• In a video, the same idea per frame, which is the only route to an animated one.

All three produce a graphic or a styled web page, and both are proper text effects in a way this page is not. Neither goes in a username, a bio or a chat message — which is the one thing this page can do, in exchange for six colours you do not choose.

How CSS Gradient Text Actually Works

Since this is what most people mean by the phrase, here is the whole technique. It is three declarations, and it works in every current browser.

h1 {
  background: linear-gradient(90deg, #ff5f6d, #ffc371);
  background-clip: text;
  color: transparent;
}

The trick is that you are not setting a text color at all. You paint a gradient behind it, then use background-clip to crop that painting to the shape of the letters, and make the text colour transparent so the painting shows through. The letters stay real text — selectable, searchable and readable by a screen reader — while the colour comes from underneath.

Everything is adjustable from there:

• Customize the colours. Any hex codes you like, and as many as you want — linear-gradient(90deg, #f00, #0f0, #00f) gives three. These are the color stops.
• Gradient direction. The angle in degrees: 90deg runs left to right, 180deg top to bottom. Swap linear-gradient for radial-gradient and it spreads from a centre point instead.
• Where each colour lands. Add a percentage after a stop — #f00 20% — to push the fade earlier or later.
• Animation. Make the background wider than the element and animate background-position; the colours then travel through the letters for a dynamic heading.

A CSS gradient text generator with a live preview and sliders will hand you the same css code without typing it, which is what most tools in this category are: you pick colours, adjust the angle and font size, and copy the generated html and CSS out.

Where CSS Gradient Text Does Not Work

Three limits worth knowing before you build a heading around it.

• Email. Support for background-clip: text across email clients is poor and inconsistent. The standard approach for a branded tagline in a campaign is an image with the text baked in, plus real text in the alt attribute.
• Anywhere you do not control the CSS. A social media post, a presentation, a document, someone else's site. This is the one feature no CSS text effect can offer. The generated code needs a stylesheet to live in.
• Contrast. A gradient running into a pale stop can fail contrast checks at the light end even when the dark end passes. Worth testing the whole sweep rather than the average.

For a presentation or a logo, a design tool applies a gradient fill to the type — a font style setting rather than a colour one — and exports it as an image or SVG. That is also the route for Canva, where a text gradient is an app rather than a built-in setting.

Screen Readers, and Why the Difference Matters

This is the sharpest contrast between the two approaches, and it goes the way you would hope.

CSS gradient text is still text. The colour lives in a background layer, so a screen reader reads the heading exactly as written and a search engine indexes it normally. Accessibility costs you nothing.

The output of this page is not. Each square is an emoji with a name, so an assistive reader announces r🟪e🟦d🟩 as r, red square, e, blue square, d, green square — a name after every letter. For a decorative username that is a nuisance; for anything that has to be understood it is unusable.

That is the honest ranking. If you control the stylesheet, use CSS. If you need colour in a field that accepts nothing but characters, this page is the only option — and it is a colour code rather than a fade.

What It Costs to Paste

This is the most expensive style on the site by some margin. Each square is an emoji beyond the Basic Multilingual Plane, so every character you type becomes three UTF-16 units — the letter plus two for the square.

g🟥r🟪a🟥d🟩i🟨e🟦n🟧t🟧 is eight letters to a reader, 16 characters to a code-point counter, and 24 units to anything counting UTF-16. In bytes it travels as 40 against 8 for the plain word — five times the size.

On a bio field with a short limit that is the binding constraint: a colour-coded phrase runs out of room at roughly a fifth of the length you would expect. And g🟥r🟪a🟥d🟩i🟨e🟦n🟧t🟧 is not the string gradient, so nothing will search or autocomplete it.

Similar tools to explore: Rainbow appends a single 🌈 after each letter — c🌈o🌈l🌈o🌈u🌈r🌈 — Neon uses monochrome bursts for c✹o✹l✹o✹u✹r✹, Glitter cycles three sparkles for c✦o✦l✦o✦u✦r✦, and Vaporwave widens the letters instead of colouring them: ｃ ｏ ｌ ｏ ｕ ｒ.