Adding Visual Flair & Decoration
Create smooth color transitions (gradients) for backgrounds.
Skill ID: VisualFlair_35
Description: Make a background smoothly change from one color to another.
Where to apply: Hero sections, buttons, decorative banners.
Key Tailwind Classes:
bg-gradient-to-r from-purple-500 to-pink-500
This combination creates a linear gradient.
bg-gradient-to-r
sets the gradient direction to the right.
from-purple-500
sets the starting color.
to-pink-500
sets the ending color.
You can also use other directions like
bg-gradient-to-l
(left),
bg-gradient-to-t
(top),
bg-gradient-to-b
(bottom), and diagonals like
bg-gradient-to-tr
(top-right). You can also add intermediate colors using
via-color
utilities (e.g.,
via-blue-500
).
Gotcha: Gradients can look harsh or dated if the chosen colors don't blend well. Also, ensure any text placed on top of a gradient maintains sufficient contrast across all parts of the gradient for readability.
Example:
Live Preview:
Code:
<div class="h-40 w-full rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center text-white text-lg font-bold p-4 shadow-md">
This div has a gradient background.
</div>