bg-gradient-to-b
Create natural vertical gradients that flow from top to bottom. Perfect for headers, hero sections, and any design that needs downward visual flow.
Top to Bottom Gradient
Top ↓ Bottom
<div class="bg-gradient-to-b from-green-500 to-blue-500">
Top to Bottom Gradient
</div> How it Works
- •
bg-gradient-to-bsets direction to bottom - •
from-green-500defines starting color (top) - •
to-blue-500defines ending color (bottom) - • Creates smooth vertical transition downward
Header & Hero Examples
Hero Section
Perfect for creating depth and focus
Brand
Dashboard
Welcome back, John!
Card content with gradient header
Popular Color Combinations
Professional
from-slate-600 to-slate-800 Ocean
from-cyan-400 to-blue-700 Sunset
from-yellow-400 to-red-600 Forest
from-green-400 to-green-800 Royal
from-purple-400 to-purple-800 Fire
from-orange-400 to-red-700 Interactive Elements
Gradient Button
bg-gradient-to-b from-green-500 to-green-700 Alert Box
Warning!
This is an important message
bg-gradient-to-b from-yellow-400 to-yellow-600 Status Badge
Premium
bg-gradient-to-b from-blue-500 to-blue-700 Best Practices
✅ Perfect For
- • Header and navigation backgrounds
- • Hero sections and banners
- • Button and interactive elements
- • Card headers and titles
- • Creating depth and hierarchy
- • Natural lighting effects
❌ Avoid When
- • Footer elements (use to-t instead)
- • Upward motion is desired
- • Text readability is compromised
- • Overusing throughout the design
- • Creating unnatural lighting
- • Mobile performance is critical