5.1 Gradientes Lineales
Los gradientes son una herramienta poderosa en el diseño web, permitiendo crear transiciones suaves entre colores sin usar imágenes. CSS ofrece dos tipos principales de gradientes: lineales (linear-gradient) y radiales (radial-gradient). Estos gradientes se usan para fondos de elementos, crear botones y otros efectos visuales.
Gradientes lineales (linear-gradient)
Un gradiente lineal crea una transición suave entre dos o más colores a lo largo de una línea (eje) determinada. La línea puede ser horizontal, vertical o en cualquier ángulo.
Sintaxis
background: linear-gradient( direction, color-stop1, color-stop2, ...);
Valores
direction: dirección del gradiente. Puede ser especificada en grados (por ejemplo,90deg), usando palabras clave (por ejemplo,to right,to bottom left)color-stop: punto de color, determina el color y su posición en el gradiente
Ejemplos de uso
Gradiente horizontal:
.linear-gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
<body>
<div class="linear-gradient-horizontal">Gradiente horizontal</div>
</body>
Gradiente vertical:
.linear-gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
}
<body>
<div class="linear-gradient-vertical">Gradiente vertical</div>
</body>
Gradiente diagonal:
.linear-gradient-diagonal {
width: 200px;
height: 200px;
background: linear-gradient(45deg, purple, pink);
}
<body>
<div class="linear-gradient-diagonal">Gradiente diagonal</div>
</body>
Gradiente multicolor:
.linear-gradient-multi {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow, green, blue);
}
<body>
<div class="linear-gradient-multi">Gradiente multicolor</div>
</body>
Explicación del código:
to right: el gradiente va de izquierda a derechato bottom: el gradiente va de arriba a abajo45deg: el gradiente va en un ángulo de 45 gradosred,yellow,green,blue: varios puntos de color para crear un gradiente multicolor
5.2 Gradientes Radiales
radial-gradient crea una transición suave entre colores que sale desde el centro y se expande hacia los bordes de un círculo o elipse. Los gradientes radiales pueden crear efectos visuales interesantes, como la simulación de tridimensionalidad.
Sintaxis:
background: radial-gradient( direction, color-stop1, color-stop2, ...);
Valores:
shape: forma del gradiente, puede sercircle(círculo) oellipse(elipse) (valor por defecto)size: tamaño del gradiente, puede serclosest-side,closest-corner,farthest-side,farthest-cornerposition: posición del centro del gradiente, puede ser especificada en porcentajes, píxeles o usando palabras clave (por ejemplo,center,topleft)color-stop: punto de color, determina el color y su posición en el gradiente
Ejemplos de uso
Gradiente circular:
.radial-gradient-circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
<body>
<div class="radial-gradient-circle">Gradiente circular</div>
</body>
Gradiente elíptico:
.radial-gradient-ellipse {
width: 200px;
height: 200px;
background: radial-gradient(ellipse, blue, green);
}
<body>
<div class="radial-gradient-ellipse">Gradiente elíptico</div>
</body>
Gradiente desde el centro:
.radial-gradient-at-center {
width: 200px;
height: 200px;
background: radial-gradient(circle at center, purple, pink);
}
<body>
<div class="radial-gradient-at-center">Gradiente desde el centro</div>
</body>
Gradiente desde la esquina:
.radial-gradient-at-corner {
width: 200px;
height: 200px;
background: radial-gradient(circle at top left, red, blue, green);
}
<body>
<div class="radial-gradient-at-corner">Gradiente desde la esquina</div>
</body>
Explicación del código:
circle: crea un gradiente circularellipse: crea un gradiente elípticoat center: el gradiente comienza desde el centroat top left: el gradiente comienza desde la esquina superior izquierdared,blue,green: varios puntos de color para crear un gradiente multicolor
5.3 Configuraciones adicionales de gradientes
Gradientes repetitivos
1. Gradientes lineales repetitivos (repeating-linear-gradient)
Los gradientes lineales repetitivos crean un patrón repetitivo con un gradiente lineal.
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
2. Gradientes radiales repetitivos (repeating-radial-gradient)
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
3. Puntos de color transparentes
Los puntos de color pueden incluir transparencia para crear efectos visuales más complejos.
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
4. Uso de varios gradientes juntos
Es posible usar varios gradientes para crear fondos complejos.
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
GO TO FULL VERSION