Tutorial: Cómo hacer degradados de color en CSS

En este tutorial, aprenderás cómo crear degradados de color en CSS para darle un aspecto atractivo a tus diseños web. Aunque no seas un experto en informática, podrás seguir estos pasos para lograr degradados de color en tus proyectos.

1. Introducción a los degradados de color en CSS

Los degradados de color son una transición suave entre dos o más colores. En CSS, podemos crear degradados lineales y radiales.

a. Degradados lineales

Un degradado lineal es aquel que sigue una línea recta. Puedes controlar la dirección y los colores del degradado.

b. Degradados radiales

Un degradado radial es aquel que se origina desde un punto central y se extiende hacia el exterior en forma circular o elíptica. Puedes controlar el tamaño, la forma y los colores del degradado.

2. Cómo crear degradados lineales en CSS

Para crear un degradado lineal, utiliza la función linear-gradient() en la propiedad background-image de un elemento.

Sintaxis básica:

elemento {
  background-image: linear-gradient(dirección, color1, color2, ...);
}

a. Dirección del degradado

Puedes especificar la dirección del degradado utilizando grados (por ejemplo, 45deg) o palabras clave (por ejemplo, to right). Si no se especifica una dirección, el degradado será de arriba a abajo.

Ejemplo:

div {
  background-image: linear-gradient(45deg, red, blue);
}

b. Colores del degradado

Puedes agregar tantos colores como desees al degradado, separándolos por comas. También puedes especificar la posición de cada color utilizando porcentajes o valores de longitud (por ejemplo, 50% o 100px).

Ejemplo:

div {
  background-image: linear-gradient(90deg, red, yellow 50%, blue);
}

3. Cómo crear degradados radiales en CSS

Para crear un degradado radial, utiliza la función radial-gradient() en la propiedad background-image de un elemento.

Sintaxis básica:

elemento {
  background-image: radial-gradient(forma tamaño, color1, color2, ...);
}

a. Forma y tamaño del degradado

Puedes especificar la forma del degradado como circle (círculo) o ellipse (elipse). Además, puedes controlar el tamaño del degradado con palabras clave como closest-side, farthest-side, closest-corner y farthest-corner.

Ejemplo:

div {
  background-image: radial-gradient(circle closest-side, red, blue);
}

b. Colores del degradado

Al igual que en los degradados lineales, puedes agregar tantos colores como desees al degradado radial y especificar la posición de cada color.

Ejemplo:

div {
  background-image: radial-gradient(ellipse at center, yellow, green 50%, blue);
}

Conclusión

Ahora que ya conoces cómo crear degradados de color en CSS, puedes aplicarlos en tus diseños web para darles un aspecto