| Clase Tailwind | Dirección | Ejemplo |
|---|---|---|
| bg-gradient-to-r | De izquierda a derecha |
→
|
| bg-gradient-to-l | De derecha a izquierda |
←
|
| bg-gradient-to-t | De abajo hacia arriba |
↑
|
| bg-gradient-to-b | De arriba hacia abajo |
↓
|
| bg-gradient-to-tr | Diagonal inferior izquierda → superior derecha |
↗
|
| bg-gradient-to-bl | Diagonal superior derecha → inferior izquierda |
↙
|
| bg-gradient-to-tl | Diagonal inferior derecha → superior izquierda |
↖
|
| bg-gradient-to-br | Diagonal superior izquierda → inferior derecha |
↘
|
| bg-[linear-gradient(45deg,...)] | Dirección personalizada 45° |
45°
|
| bg-[linear-gradient(135deg,...)] | Dirección personalizada 135° |
135°
|
| bg-[linear-gradient(200deg,...)] | Dirección personalizada 200° |
200°
|
Tailwind utiliza: from-, via-, to- para definir los puntos
del gradiente.
| Clase Tailwind | CSS equivalente | Vista previa |
|---|---|---|
| bg-gradient-to-r from-blue-500 to-green-500 | background-image: linear-gradient(to right, #3b82f6, #22c55e); |
Azul → Verde
|
| bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 | background-image: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444); |
Púrpura → Rosa → Rojo
|
| NOTA: Solo se puede usar via-color-value una sola vez | ||
| bg-gradient-to-r from-[#06b6d4] to-[#3b82f6] | background-image: linear-gradient(to right, #06b6d4, #3b82f6); |
Custom HEX
|
| bg-[linear-gradient(to_right,red,orange,yellow,green)] | background-image: linear-gradient(to right, red, orange, yellow, green); |
4 Colores
|
| bg-[linear-gradient(red_0%,red_50%,yellow_50%,yellow_100%)] | background-image: linear-gradient(red 0%, red 50%, yellow 50%, yellow 100%); |
División Exacta
|
Usa bg-clip-text junto con text-transparent para aplicar un fondo con gradiente que se vea a través del texto.
| Clase Tailwind | CSS equivalente | Resultado |
|---|---|---|
| bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-yellow-500 |
background-image: linear-gradient(to right, #ec4899, #facc15); background-clip: text; color: transparent; |
Texto con gradiente ↔
|
| bg-clip-text text-transparent bg-gradient-to-l from-blue-500 to-green-500 |
background-image: linear-gradient(to left, #3b82f6, #22c55e); background-clip: text; color: transparent; |
Texto con gradiente ↔
|
| bg-clip-text text-transparent bg-gradient-to-tl from-purple-600 to-pink-400 |
background-image: linear-gradient(to top left, #9333ea, #f472b6); background-clip: text; color: transparent; |
Gradiente diagonal ↖
|
| bg-clip-text text-transparent bg-[linear-gradient(45deg,#06b6d4,#3b82f6)] |
background-image: linear-gradient(45deg, #06b6d4, #3b82f6); background-clip: text; color: transparent; |
Gradiente Custom 🎨
|