bg-gradient-to-tr
Create dynamic diagonal gradients that flow from bottom-left to top-right. Perfect for modern designs, dynamic backgrounds, and creating visual movement.
Bottom-Left to Top-Right Gradient
Bottom-Left ↗ Top-Right
<div class="bg-gradient-to-tr from-pink-500 to-purple-500">
Diagonal Gradient
</div> How it Works
- •
bg-gradient-to-trsets diagonal direction - •
from-pink-500starts at bottom-left - •
to-purple-500ends at top-right - • Creates dynamic diagonal flow
Diagonal Gradient Directions
to-tr
Bottom-left → Top-right
to-tl
Bottom-right → Top-left
to-br
Top-left → Bottom-right
to-bl
Top-right → Bottom-left
Modern UI Examples
Modern Card
Premium Plan
Everything you need to grow
$29/mo
bg-gradient-to-tr from-pink-500 to-purple-600 CTA Button
bg-gradient-to-tr from-blue-500 to-cyan-400 Status Badge
Online
bg-gradient-to-tr from-green-500 to-emerald-400 Trending Color Combinations
Neon
from-fuchsia-500 to-cyan-400 Sunset
from-orange-500 to-pink-500 Ocean
from-blue-600 to-teal-400 Forest
from-green-600 to-lime-400 Royal
from-purple-600 to-indigo-400 Fire
from-red-600 to-yellow-400 Three Color Diagonal Gradients
Rainbow Flow
Red → Yellow → Blue
from-red-500 via-yellow-500 to-blue-500 Cosmic
Purple → Pink → Cyan
from-purple-700 via-pink-500 to-cyan-300 Best Practices
✅ Perfect For
- • Modern card designs and CTAs
- • Dynamic hero sections
- • Interactive buttons and badges
- • Creating visual movement
- • Brand-focused elements
- • Mobile-first designs
❌ Avoid When
- • Text readability is compromised
- • Conservative/formal designs
- • Overusing diagonal elements
- • Accessibility is a concern
- • Print-focused layouts
- • Performance is critical