49 - Creando Gradientes con CSS: Guía completa

---

Gradientes con CSS

• 1. Linear Gradients
• 2. Usando Ángulos
• 3. Paradas de colores múltiples
• 4. Uso de la transparencia
• 5. Repetir un degradado lineal

---

1. Linear Gradients

Un degradado lineal crea una transición de color a lo largo de una línea recta. Por defecto, va de arriba a abajo. Se define con la función linear-gradient(), especificando al menos dos colores.

background-image: linear-gradient(red, yellow);

---

2. Usando Ángulos

Puedes cambiar la dirección del degradado usando un ángulo (45deg) o palabras clave como to top, to right, to bottom left, etc.

background-image: linear-gradient(to top right, red, yellow);

---

3. Usando paradas de colores múltiples

Puedes añadir más de dos colores y controlar la posición de cada transición con paradas de color (color stops) usando porcentajes.

background-image: linear-gradient(red, yellow 20%, green 70%);

---

4. Uso de la transparencia

Puedes usar la palabra clave transparent para crear efectos de desvanecimiento, haciendo que el color se desvanezca por completo.

background-image: linear-gradient(to right, #39a039, transparent);

---

5. Repetir un degradación lineal

La función repeating-linear-gradient() se usa para crear patrones que se repiten indefinidamente. Es ideal para fondos con rayas o texturas.

background-image: repeating-linear-gradient(45deg, white, white 10px, #39a039 10px, #39a039 20px);

---

Ir al índice