Para hacer los degradados usaremos colores RGBA
Color 1: rgba(128,0,128,1)
Parada 1: 0%
Mismo color que:
purple
#800080
rgb(128,0,128)
Color 2: rgba(255,0,0,1)
Parada 2: 35%
Mismo color que:
red
#FF0000
rgb(255,0,0,)
Color 3: rgba(255,255,0,1)
Parada 3: 100%
Mismo color que:
yellow
#FFFF00
rgb(255, 255, 0)
Degradados lineales
Cambiando la dirección del degradado
1. Degradado lineal de izquierda a derecha con 3 colores
background: linear-gradient(90deg, rgba(128,0,128,1) 0%, rgba(255,0,0,1) 35%, rgba(255,255,0,1) 100%);
2. Degradado lineal de derecha a izquierda con 3 colores
background: linear-gradient(270deg, rgba(128,0,128,1) 0%, rgba(255,0,0,1) 35%, rgba(255,255,0,1) 100%);
3. Degradado lineal de arriba hacia abajo con 3 colores
background: linear-gradient(180deg, rgba(128,0,128,1) 0%, rgba(255,0,0,1) 35%, rgba(255,255,0,1) 100%);
4. Degradado lineal de abajo hacia arriba con 3 colores
background: linear-gradient(0deg, rgba(128,0,128,1) 0%, rgba(255,0,0,1) 35%, rgba(255,255,0,1) 100%);
Degradados en diagonal
1. Degradado lineal desde la esquina inferior izquierda ↗
background: linear-gradient(45deg, rgba(128,0,128,1) 0%, rgba(255,0,0,1) 35%, rgba(255,255,0,1) 100%);
2. Degradado lineal desde la esquina superior izquierda ↘
background: linear-gradient(135deg, rgba(128,0,128,1) 0%, rgba(255,0,0,1) 35%, rgba(255,255,0,1) 100%);
3. Degradado lineal desde la esquina superior derecha ↙
background: linear-gradient(225deg, rgba(128,0,128,1) 0%, rgba(255,0,0,1) 35%, rgba(255,255,0,1) 100%);
4. Degradado lineal desde la esquina inferior derecha ↖
background: linear-gradient(315deg, rgba(128,0,128,1) 0%, rgba(255,0,0,1) 35%, rgba(255,255,0,1) 100%);
Nota: pueden jugar con los ángulos (grados) que deseen entre 0 y 360
Repetición
Degradado lineal repetido con ángulo de 90
Nota: se pueden cambiar los ángulos (grados) como en los ejemplos anteriores, pero hay que disminuir los porcentajes de las paradas. La sumatoria del porcentaje debe ser menor a 100 para que se repita. Y cuanto menor es ese porcentaje, más veces se va a repetir.
Ejemplo 1: porcentaje pequeño
background: repeating-linear-gradient(90deg, rgba(128,0,128,1) 0%, rgba(255,0,0,1) 2.5%, rgba(255,255,0,1) 5%);
Ejemplo 2: porcentaje grande
background: repeating-linear-gradient(90deg, rgba(128,0,128,1) 0%, rgba(255,0,0,1) 25%, rgba(255,255,0,1) 50%);
Degradados radiales
Básicos
1. Degradado radial elíptico (por defecto)
background: radial-gradient(rgba(128,0,128,1) 0%, rgba(255,0,0,1) 50%, rgba(255,255,0,1) 100%);
2. Degradado radial circular
background: radial-gradient(circle, rgba(128,0,128,1) 0%, rgba(255,0,0,1) 50%, rgba(255,255,0,1) 100%);
3. Degradado radial circular repetido
background: repeating-radial-gradient(circle, rgba(128,0,128,1) 0%, rgba(255,0,0,1) 2.5%, rgba(255,255,0,1) 5%);
Cambiando el tamaño
Size Keywords: parámetros que definen el tamaño del gradiente
1. Degradado radial circular con valor closest-side
background: radial-gradient(circle closest-side at 35% 40%, rgba(128,0,128,1), rgba(255,0,0,1), rgba(255,255,0,1));
2. Degradado radial circular con valor farthest-side
background: radial-gradient(circle farthest-side at 35% 40%, rgba(128,0,128,1), rgba(255,0,0,1), rgba(255,255,0,1));
3. Degradado radial circular con valor closest-corner
background: radial-gradient(circle closest-corner at 35% 40%, rgba(128,0,128,1), rgba(255,0,0,1), rgba(255,255,0,1));
4. Degradado radial circular con valor farthest-corner (por defecto)
background: radial-gradient(circle farthest-corner at 35% 40%, rgba(128,0,128,1), rgba(255,0,0,1), rgba(255,255,0,1));
Nota: se puede jugar con los porcentajes para ir cambiando el tamaño y lugar. Ejemplos con el mismo valor (closest-side) y distintos porcentajes:
Ejemplo 1:
background: radial-gradient(circle closest-side at 10% 15%, rgba(128,0,128,1), rgba(255,0,0,1), rgba(255,255,0,1));
Ejemplo 2:
background: radial-gradient(circle closest-side at 35% 40%, rgba(128,0,128,1), rgba(255,0,0,1), rgba(255,255,0,1));
Ejemplo 3:
background: radial-gradient(circle closest-side at 65% 80%, rgba(128,0,128,1), rgba(255,0,0,1), rgba(255,255,0,1));
Ejemplo 4:
background: radial-gradient(circle closest-side at 90% 85%, rgba(128,0,128,1), rgba(255,0,0,1), rgba(255,255,0,1));
Degradados cónicos
Básicos
1. Degradado cónico de tres colores
background: conic-gradient(rgba(128,0,128,1), rgba(255,0,0,1), rgba(255,255,0,1));
2. Degradado cónico de tres colores con ángulos (grados) para cada color
background: conic-gradient(rgba(128,0,128,1) 45deg, rgba(255,0,0,1) 90deg, rgba(255,255,0,1) 270deg);
3. Degradado cónico con un ángulo de inicio específico aplicando la palabra clave from
background: conic-gradient(from 33deg, rgba(128,0,128,1), rgba(255,0,0,1), rgba(255,255,0,1));
4. Degradado cónico con centro específico aplicando la palabra clave at
background: conic-gradient(at 70% 15%, rgba(128,0,128,1), rgba(255,0,0,1), rgba(255,255,0,1));
Jugando para dar distintos efectos
5. Degradado cónico con repetición
background-image: repeating-conic-gradient(rgba(128,0,128,1) 0%, rgba(255,0,0,1) 5%, rgba(255,255,0,1) 10%);
6. Degradado cónico con repetición y colores definidos (efecto candy)
background-image: repeating-conic-gradient(rgba(128,0,128,1) 0deg 10deg, rgba(255,0,0,1) 10deg 20deg, rgba(255,255,0,1) 20deg 30deg);
7. Degradado cónico con ángulos para hacer un grafico de torta (pie-chart). Es necesario aplicar border-radius: 50% para hacer el círculo
background: conic-gradient(rgba(128,0,128,1) 0deg, rgba(128,0,128,1) 90deg, rgba(255,0,0,1) 90deg, rgba(255,0,0,1) 180deg, rgba(255,255,0,1) 180deg, rgba(255,255,0,1) 270deg, rgb(0, 255, 0) 270deg);
Equibalencias y compatibilidades
Mismo efecto distinto formato de color
1. Color RGBA
background: linear-gradient(90deg, rgba(128,0,128,1) 0%, rgba(255,0,0,1) 35%, rgba(255,255,0,1) 100%);
1. Color RGB
background: linear-gradient(90deg, rgb(128,0,128) 0%, rgb(255,0,0) 35%, rgb(255,255,0) 100%);
1. Color Hexadecimal
background: linear-gradient(90deg, #800080 0%, #FF0000 35%, #FFFF00 100%);
1. Color por nombre
background: linear-gradient(90deg, purple 0%, red 35%, yellow 100%);