Backgrounds & Gradients
Create rich, modern UI visuals with background attachment, sizing, position, and multi-stop linear gradients.
1. Linear Gradients (`bg-gradient-to-*`)
Gradients require specifying a direction (e.g. bg-gradient-to-r) and at least two color stops (from-* and to-*):
bg-gradient-to-r from-cyan-500 to-blue-500
3-Stop Gradient: from-purple-500 via-pink-500 to-red-500
Diagonal Gradient: bg-gradient-to-br
2. Gradient Text Effect (`bg-clip-text`)
Combine background gradient with text clipping to create stunning modern heading styles:
Build Stunning Interfaces
Rendered using Tailwind Gradient Text Clipping
HTML Code:
<h2 className="text-5xl font-extrabold bg-gradient-to-r from-blue-400 via-teal-400 to-emerald-400 bg-clip-text text-transparent"> Build Stunning Interfaces </h2>
Next Up
Master smooth transitions, transforms (scale, rotate), and keyframe animations.
Next Lesson: Transitions & Animations →
