You can add an intermediate color stop using the
via-*
utility.
Sky -> Fuchsia -> Orange
Classes:
bg-gradient-to-r from-sky-400 via-fuchsia-500 to-orange-400
. The
drop-shadow-md
on the text helps with readability.
You can use
to-transparent
or a specific color with opacity (e.g.,
to-blue-500/0
if configured) for fade effects. Here, we use pre-defined transparent keyword.
Content visible through faded top
Inner div uses:
bg-gradient-to-b from-blue-600 via-blue-600/70 to-transparent
. Requires careful layering for desired effect.
Choosing analogous or harmonious colors generally results in smoother, more pleasing gradients. Text contrast remains paramount.
Readable Text on Smooth Gradient
Classes:
from-emerald-400 via-cyan-400 to-sky-500
.
Text has a semi-transparent background (
bg-white/70
) to ensure readability across the gradient.