Tutorial: Cómo hacer degradados de color en CSS

05/05/2023

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

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.

Índice
  1. 1. Introducción a los degradados de color en CSS
    1. a. Degradados lineales
    2. b. Degradados radiales
  2. 2. Cómo crear degradados lineales en CSS
    1. a. Dirección del degradado
    2. b. Colores del degradado
  3. 3. Cómo crear degradados radiales en CSS
    1. a. Forma y tamaño del degradado
    2. b. Colores del degradado
  4. Conclusión

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

Pionera del caos

Ingeniera Informática con Máster en Bioinformática, casi doctora y freelancer. Todo lo que te cuento en este blog son aprendizajes que yo misma he tenido ya sea durante mis estudios o en otros proyectos!

Otras Entradas Relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *



Para continuar es necesario que confirmes la política de privacidad de la web.

Subir