Text Gradient Color Designer
Build two-color linear gradient text with any angle.
Online Tool
Tool Working Principle
Uses background-image: linear-gradient() combined with -webkit-background-clip: text and color: transparent to reveal the gradient through the letterforms.
Step-by-Step Usage Tutorial
- 1Enter your text.
- 2Pick the from and to colors and the angle.
- 3Copy the CSS output.
Frequently Asked Questions
Why does my gradient or outline text vanish if I drop color: transparent?+
Both techniques paint the effect behind the glyphs and then punch the letterforms out. background-clip: text clips a background to the text shape, and -webkit-text-stroke draws only an outline — in each case a normal fill colour would sit on top and hide the result. The transparent fill is what lets the effect show through, so it is not optional.
Does -webkit-text-stroke work outside Safari and Chrome?+
Yes. Despite the prefix, Firefox and Edge both implement it, so it is safe in practice. Note that the stroke is centred on the glyph outline, meaning half of it eats inward and thins the letterform — compensate with a heavier font-weight at larger stroke widths.
Why does blur affect the box around my text, not just the letters?+
filter: blur() rasterises and blurs the entire element, including its background, border, and children. If you only want the letters softened, put the text in its own inline element and apply the filter there, leaving the container untouched.
Should I use opacity or a colour with an alpha channel?+
For text, prefer an alpha colour such as rgb(0 0 0 / 45%). opacity applies to the whole element and every descendant, and it creates a new stacking context that can break z-index and blend modes further up the tree. An alpha colour only affects the fill.
Is text with these effects still accessible and indexable?+
The markup stays real text, so crawlers and screen readers read it normally. The risk is visual: if a background image behind background-clip: text fails to load, a transparent fill leaves the text invisible. Declare a solid fallback colour first, then override it with the effect.
Do I need an account to use Gradient Text Designer?+
No. Every tool on TypoStudio.tools runs fully in the browser with no account, email, or API key.
Is my input text stored anywhere?+
No. All processing happens locally in your browser. Nothing is uploaded, logged, or shared with a server, and closing the tab discards everything.
Can I use the output commercially?+
Yes. Generated Unicode strings and CSS snippets are yours to use in commercial and personal work with no attribution required.
Which browsers are supported?+
The latest two versions of Chrome, Edge, Safari, and Firefox on desktop, tablet, and mobile.