bg-gradient-to-t
Create stunning vertical gradients that flow from bottom to top. Perfect for creating upward motion, sky effects, and dynamic backgrounds that draw the eye upward.
Bottom to Top Gradient
Bottom ↑ Top
<div class="bg-gradient-to-t from-blue-500 to-purple-500">
Bottom to Top Gradient
</div> How it Works
- •
bg-gradient-to-tsets direction to top - •
from-blue-500defines starting color (bottom) - •
to-purple-500defines ending color (top) - • Creates smooth vertical transition upward
Popular Color Combinations
Sky
from-blue-600 to-sky-300 Sunrise
from-orange-600 to-yellow-300 Ocean Depth
from-blue-900 to-cyan-400 Forest
from-green-800 to-green-300 Twilight
from-purple-900 to-pink-400 Fire
from-red-700 to-orange-300 UI Component Examples
Card Footer
Product Card
Card content goes here
$99.99
bg-gradient-to-t from-blue-500 to-transparent Loading Animation
75% Complete
bg-gradient-to-t from-green-600 to-green-300 Status Badge
Active
bg-gradient-to-t from-purple-600 to-purple-400 Three Color Gradients
Sunset Sky
Orange → Pink → Yellow
from-orange-700 via-pink-500 to-yellow-300 Ocean Layers
Deep → Mid → Surface
from-blue-900 via-blue-600 to-cyan-300 Best Practices
✅ Do
- • Use for upward motion and elevation effects
- • Perfect for sky and atmospheric backgrounds
- • Great for footer gradients that fade upward
- • Ideal for progress indicators showing growth
- • Use darker colors at bottom for stability
- • Consider natural light direction
❌ Don't
- • Use when downward flow is more natural
- • Overuse in navigation elements
- • Mix with conflicting directional cues
- • Use light-to-dark upward (feels unnatural)
- • Ignore the psychological impact of direction
- • Forget mobile orientation changes