Example 3: Multi-Stop & Diagonal Gradients

Gotcha Reminder: Color Harmony

Gradients can look harsh or dated if the chosen colors don't blend well. For instance, a gradient with highly contrasting, non-harmonious colors might not be aesthetically pleasing. It's often best to choose colors that are analogous (next to each other on the color wheel) or that share a similar level of saturation or brightness for smoother transitions.

The "Red via Yellow to Orange" example above uses analogous colors, which generally blend well. However, if you picked, for example, from-red-700 via-lime-500 to-purple-700 , the result might be jarring. Always preview your gradients!