Some color combinations can result in a harsh or muddy transition, making the gradient look less appealing. Below is an example of a gradient that might be considered harsh by some.
Red to Green (can be harsh)
This gradient (
from-red-600 to-green-600
) might appear jarring due to the strong contrast between red and green.
Text placed on a gradient can become hard to read if its color doesn't contrast sufficiently with all parts of the gradient.
White text: Good on Indigo/Purple, okay on Pink.
Black text: Challenging on Indigo, better on Pink.
Yellow text: May vary significantly based on specific shades.
Notice how the readability of "White text" and "Black text" changes across the gradient from dark indigo to lighter pink.
Always test text contrast across the full range of your gradient. Consider adding a subtle text shadow (e.g.,
drop-shadow
utility) or a semi-transparent background to the text itself if contrast is an issue.