Gradient text fills letters with a smooth color blend using background-clip: text — the effect behind countless hero headlines and landing pages. Add animation and the gradient slowly flows through the letters.
Type your text, pick two colors and an angle, toggle the shine animation, and copy the CSS. The output includes the vendor prefixes so it works across browsers.
Frequently Asked Questions
Q: Why is my gradient not showing in the browser?
Why is my gradient not showing in the browser? The trick needs -webkit-background-clip: text and -webkit-text-fill-color: transparent. Both are included in the output — check they are not stripped by a CSS minifier.
Q: Does gradient text work in all browsers?
Does gradient text work in all browsers? Yes — Chrome, Edge, Safari and Firefox all support background-clip: text. Very old browsers fall back to a solid color if you set a color fallback first.
Q: Can I use it on buttons?
Can I use it on buttons? Yes, but buttons carry actions: prefer a solid high-contrast label, and reserve gradient text for headlines and decorative titles.
Q: How do I add more than two colors?
How do I add more than two colors? Edit the linear-gradient in the output and add extra color stops, e.g. linear-gradient(90deg, red, yellow, blue).
Q: Is gradient text good for SEO and accessibility?
Is gradient text good for SEO and accessibility? The text remains real HTML text, so SEO is unaffected. Keep contrast high and avoid gradient text in body copy for readability.
CSS Named Colors & Color Psychology
The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.
Coral #FF7F50Warm and friendly — popular for CTAs in lifestyle brands
Tomato #FF6347Energetic red-orange, great for urgent accents
Goldenrod #DAA520Earthy gold associated with quality and heritage
Teal #008080Balanced blue-green — calm, trustworthy, professional
Indigo #4B0082Deep violet tied to wisdom and premium brands
Crimson #DC143CBold red for passion, alerts, and strong emphasis
SlateBlue #6A5ACDSoft purple-blue common in SaaS dashboards
ForestGreen #228B22Nature and growth — the color of eco and finance brands
HotPink #FF69B4Playful and bold, the signature of youth-oriented design
Navy #000080Authority and stability — the suit-and-tie of colors
Q: What are CSS named colors?
What are CSS named colors? CSS defines 148 named colors like Coral and Goldenrod that work in any stylesheet without hex codes. They are great for prototyping but designers usually switch to hex or HSL for precise brand colors.
Q: How does color psychology affect design?
How does color psychology affect design? Warm colors (red, orange, yellow) create energy and urgency; cool colors (blue, green, teal) create calm and trust. CTAs often use warm tones while financial and health brands prefer blues and greens.