--- title: CSS3 Gradients localeTitle: Gradientes CSS3 --- ## Gradientes CSS3 Los gradientes CSS3 le permiten mostrar transiciones suaves entre dos o más colores especificados. Antes, tenías que usar imágenes para estos efectos. Sin embargo, al usar gradientes de CSS3, puede reducir el tiempo de descarga y el uso del ancho de banda. Además, los elementos con degradados se ven mejor cuando se amplían, ya que el degradado es generado por el navegador. CSS3 define dos tipos de gradientes: * Gradientes lineales (baja / arriba / izquierda / derecha / diagonalmente) * Gradientes radiales (definidos por su centro) ### Gradientes lineales CSS3 Para crear un degradado lineal, debe definir al menos dos paradas de color. Las paradas de color son los colores entre los que desea generar transiciones suaves. También puede establecer un punto de inicio y una dirección (o un ángulo) junto con el efecto de degradado. #### Sintaxis ``` background: linear-gradient(direction, color-stop1, color-stop2, ...); ``` ##### Degradado lineal: de arriba a abajo (este es el valor predeterminado) El siguiente ejemplo muestra un degradado lineal que comienza en la parte superior. Empieza en rojo, pasando a amarillo: ![gradiente lineal por defecto](https://i.imgur.com/2uGfleD.jpg) #### Ejemplo ```

Linear Gradient - Top to Bottom

This linear gradient starts at the top. It starts red, transitioning to yellow:

Note: Internet Explorer 9 and earlier versions do not support gradients.

``` ![gradiente lineal por defecto](https://i.imgur.com/CvtXCMd.jpg) ##### Gradiente lineal - de izquierda a derecha El siguiente ejemplo muestra un degradado lineal que comienza desde la izquierda. Empieza en rojo, pasando a amarillo: ![de izquierda a derecha](https://i.imgur.com/e4dRvZR.jpg) #### Ejemplo ```

Linear Gradient - Left to Right

This linear gradient starts at the left. It starts red, transitioning to yellow:

Note: Internet Explorer 9 and earlier versions do not support gradients.

``` ![de izquierda a derecha](https://i.imgur.com/k4FSyXz.jpg) #### Degradado Lineal - Diagonal Puede hacer un degradado en diagonal especificando las posiciones de inicio horizontales y verticales. El siguiente ejemplo muestra un degradado lineal que comienza en la parte superior izquierda (y va hacia la parte inferior derecha). Empieza en rojo, pasando a amarillo: ![diagonal](https://i.imgur.com/YvtbUBH.jpg) #### Ejemplo ```

Linear Gradient - Diagonal

This linear gradient starts at top left. It starts red, transitioning to yellow:

Note: Internet Explorer 9 and earlier versions do not support gradients.

``` ![diagonal-exp](https://i.imgur.com/8gKRhAp.jpg) #### Más información: [Documentación de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) || [w3schools](https://www.w3schools.com/css/css3_gradients.asp)