Choose the colors, the angle and the type of gradient, and get the CSS that paints your headline with it. The code uses background-clip: text, which works in every current browser, and includes a plain color fallback and an optional moving gradient that respects reduced motion settings.
A gradient is a smooth blend, and some blends look better than others. Two colors with similar brightness, such as a teal and a blue, give a calm result. Two colors with very different brightness, such as pale yellow and deep purple, give a strong effect but make part of the text hard to read.
The middle of a gradient between opposite colors tends to go grey or muddy. If your two colors sit far apart on the wheel, add a third that you pick yourself for the middle, so the blend passes through a color you chose rather than one the browser averaged.
Because the text color is transparent, a visitor sees the gradient or nothing. If the gradient fails to load or a style is overridden, the fallback color rule is the safety net, so keep it. Also keep real text in the page rather than an image, so search engines and screen readers still get the words.
Contrast needs checking at the weakest point. For normal text, aim for a ratio of at least 4.5 to 1 between every color in the gradient and the page background. Large text, 24 pixels regular or about 19 pixels bold, only needs 3 to 1, which is one reason gradient text is better kept to big headings.
A linear gradient changes color along a line and is the one most designers want for headlines. A radial gradient starts at the centre of the box and spreads outwards, which gives a glowing effect on short words but looks uneven across a long line.
An animated gradient adds movement and can draw the eye, but it is also a distraction and costs a little battery. Use it sparingly and keep the cycle slow, four seconds or more. The generated code stops the animation for visitors who have asked their system to reduce motion.
The gradient is set as the background of the element. Then background-clip: text cuts the background down to the shape of the letters, and the text color is made transparent so the gradient shows through them instead of the plain color.
The first line gives the text the first gradient color. A browser that does not understand background-clip: text uses that color and stays readable, instead of showing invisible text. Current browsers skip it and use the gradient.
The angle sets the direction the colors run. 90 degrees runs left to right, 180 degrees runs top to bottom, 0 degrees runs bottom to top and 45 degrees runs diagonally from the bottom left to the top right.
The gradient is stretched to twice the width of the text and ends on the same color it starts on. The background position slides across by one full width, over and over, so the colors appear to flow. It is switched off for visitors who ask their device to reduce motion.
Yes. With display left as it is, the gradient is painted across the whole box of the element, so a wrapped headline shows one continuous gradient. Make the element inline-block if you want the gradient to fit the text width exactly.
Related: CSS shadow generator, Color contrast checker, Font pairing.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.