Si ha estado en Internet durante más de unos minutos, es probable que se haya encontrado con un degradado de CSS. La propiedad de fondo de CSS se puede usar para crear una variedad de estilos diferentes, y uno de los tipos más intrigantes es lo que puede hacer con el valor de degradado.
Saber diseñar y crear diferentes gradientes CSS es una ventaja para cualquier diseñador o desarrollador de software. En este artículo, aprenderá todo lo que necesita saber para comenzar a incorporar degradados CSS en sus proyectos.
¿Qué es un degradado CSS?
Un degradado CSS es esencialmente la combinación de dos o más colores que cambia suavemente de uno a otro. El estado de transición de un gradiente CSS depende del tipo de gradiente utilizado. Hay dos tipos principales de gradientes que se utilizan comúnmente en el diseño de software: lineales y radiales.
Sin embargo, hay un tercer tipo de gradiente que es menos popular y se conoce como gradiente cónico.
Sintaxis de degradados CSS
Imagen de fondo: tipo de degradado (dirección, color1, color2);
El degradado de CSS debe asignarse a la propiedad CSS de la imagen de fondo. El tipo de degradado puede ser uno de varios; gradiente lineal, gradiente radial o gradiente cónico. El tipo de degradado va seguido de corchetes de apertura y cierre que contienen la dirección de transición del degradado, así como los colores que se incluirán en el degradado.
Relacionados: Cómo configurar una imagen de fondo en CSS
El ejemplo anterior muestra dos colores, pero un degradado puede contener varios colores diferentes. El único requisito es que cada color de la lista esté separado por una coma.
¿Qué es un degradado lineal?
El degradado lineal es el degradado CSS más popular. Crea un degradado de transición horizontal, vertical o diagonal utilizando dos o más colores.
Ejemplo de degradado lineal CSS
Imagen de fondo: degradado lineal (# 00A4CCFF, # F95700FF);
El código anterior producirá el siguiente degradado CSS:
Hay un componente principal de la sintaxis de degradado omitido en el ejemplo anterior. Este componente es la dirección de transición del degradado y se omitió porque la alineación predeterminada del degradado lineal es vertical (de arriba a abajo); esa es la salida deseada en este ejemplo.
El código anterior produce el mismo resultado que la siguiente línea de código. La única diferencia entre los dos es la sección de dirección del código.
Uso del ejemplo de degradado lineal inferior
Imagen de fondo: degradado lineal (hacia abajo, # 00A4CCFF, # F95700FF);
Como puede ver en la salida, el código anterior crea un degradado que comienza con azul en la parte superior y luego pasa lentamente al naranja en la parte inferior. Si desea invertir el orden de los colores, simplemente puede reemplazar el Hacia abajo con hasta arriba y esto invertirá la dirección del gradiente, produciendo el siguiente resultado:
Similar a la alineación vertical, la alineación horizontal de un gradiente se puede lograr con el uso de dos conjuntos de palabras clave de dirección: a la izquierda y a derecha, que producirá los siguientes resultados, respectivamente.
Degradado lineal diagonal
Es posible lograr una transición de degradado lineal diagonal en cualquier dirección de un degradado lineal. Solo hay cuatro listas específicas de palabras clave que necesita saber para que esto sea posible.
- Hacia abajo a la derecha
- Hacia abajo a la izquierda
- Arriba a la derecha
- Arriba a la izquierda
Usando el ejemplo de gradiente lineal diagonal
Imagen de fondo: degradado lineal (abajo a la derecha, # 00A4CCFF, # F95700FF);
El ejemplo anterior produce la siguiente salida:
Como puede ver en la salida anterior, el degradado lineal hace su transición en una dirección diagonal moviéndose desde la parte superior izquierda a la parte inferior derecha del degradado.
Degradado lineal multicolor
Un degradado lineal puede tener dos o más colores, pero ¿cómo se ven más colores en un degradado? Una disposición de color degradado lineal multicolor depende de su dirección. Los que hacen la transición en una dirección horizontal tendrán cada nuevo color apareciendo a la izquierda o la derecha del degradado lineal, dependiendo de la dirección exacta del degradado lineal.
Ejemplo de degradado lineal multicolor
Imagen de fondo: degradado lineal (a la derecha, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);
La línea de código anterior producirá el siguiente resultado:
Como puede ver, cada nuevo color se agrega a la derecha del degradado, creando lo que eventualmente se transforma en un arco iris. Se puede lograr el mismo resultado en dirección vertical; sin embargo, la disposición de color específica en el degradado lineal dependerá de la palabra clave de dirección vertical (hacia arriba o hacia abajo).
¿Qué es un gradiente radial?
El degradado radial crea un degradado en espiral de dos colores más que comienzan desde el centro de forma predeterminada. Donde el gradiente lineal produce un gradiente recto que fluye vertical u horizontalmente, el gradiente radial produce un gradiente circular que fluye desde el centro hacia los bordes exteriores.
Usando el ejemplo de gradiente radial
Imagen de fondo: gradiente radial (círculo, # 00A4CCFF, # F95700FF);
La línea de código anterior producirá el siguiente resultado:
Cambio del centro de degradado radial
Por defecto, un degradado radial comienza en el centro del degradado; sin embargo, es posible cambiar el punto de origen con la introducción de algunas palabras clave.
Ejemplo de cambio de la posición inicial del gradiente radial
Imagen de fondo: gradiente radial (círculo en la parte superior derecha, # 00A4CCFF, # F95700FF);
La línea de código anterior producirá el siguiente resultado:
Como puede ver en la salida de arriba, el degradado ahora comienza desde la esquina superior derecha en lugar del centro. Este cambio es posible debido a la inclusión de la palabra clave parte superior derecha en el código anterior. La siguiente lista de palabras clave también se puede utilizar para cambiar el punto de origen del degradado radial:
- Arriba a la izquierda
- Abajo a la derecha
- Abajo a la izquierda
Degradados radiales multicolores
Al igual que el degradado lineal, el degradado radial también puede usar dos colores más, la principal diferencia es que donde el degradado lineal se suma al degradado en línea recta, el degradado radial agrega nuevos colores en el exterior borde.
Ejemplo de degradado radial multicolor
Imagen de fondo: gradiente radial (círculo, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);
La línea de código anterior producirá el siguiente resultado:
Personalización de degradados
Hasta ahora, ha visto cómo cambiar la dirección y el punto central de un degradado, pero no ha visto cómo personalizar un degradado. Personalizar un degradado puede parecer mucho trabajo, pero una vez que comprenda los conceptos básicos de la creación un degradado de fondo CSS, el siguiente paso obvio es aprender a hacer que sus degradados CSS sean más único.
De forma predeterminada, los colores en un degradado ocupan una cantidad de espacio distribuida uniformemente y cada color pasa suavemente al siguiente. Entonces, si dos colores se combinan para formar un degradado, cada color ocupará la mitad del espacio disponible durante la transición de uno a otro. Si se combinan tres colores, cada color ocupará un tercio del espacio disponible.
Con un degradado personalizado, puede definir la cantidad de espacio que ocupará un color en un degradado asignando explícitamente la posición de parada de color.
Personalización de un gradiente lineal Ejemplo 1
Imagen de fondo: gradiente lineal (a la derecha, # 00A4CCFF, # F95700FF 30%);
La línea de código anterior producirá el siguiente resultado:
La salida de arriba muestra el segundo color en el degradado lineal deteniéndose en el punto del 30% del primer color en el degradado, en lugar de su posición habitual, y debido a que el segundo color es también el color final en el degradado, se extiende naturalmente a la final.
Si colocara el 30% en el código anterior al final del primer color, las cosas deberían aclararse más.
Personalización de un gradiente lineal Ejemplo 2
Imagen de fondo: gradiente lineal (a la derecha, # 00A4CCFF 30%, # F95700FF);
El código anterior producirá el siguiente resultado.
La salida anterior muestra claramente el primer color en el degradado deteniéndose en el punto del 30% del segundo color en el degradado. Este ejemplo, junto con el anterior, debería ayudar a que la personalización de la parada de color le resulte más fácil de entender.
La personalización de un degradado radial se realiza de la misma forma que un degradado lineal. Lo único que debe hacer para lograr los mismos resultados anteriores en un degradado radial es cambiar el tipo y la dirección del degradado.
Crear degradados CSS nunca ha sido tan fácil
Este artículo tutorial le proporciona las herramientas para identificar y crear degradados lineales y radiales. Si ha llegado a este punto, ha aprendido a cambiar la dirección y el centro de un degradado. Además, ahora tiene las habilidades para personalizar gradientes CSS y crear gradientes de fondo únicos.
Sin embargo, si no desea pasar directamente a la creación de degradados nuevos y únicos, puede comenzar creando algunos preexistentes de excelente apariencia.
Los colores sólidos son tan el año pasado. ¡Los degradados están de moda! Pero, ¿cómo se crean en CSS?
Leer siguiente
- Programación
- Desarrollo web
- Diseño web
- CSS
Kadeisha Kean es desarrolladora de software Full-Stack y redactora técnica / tecnológica. Tiene la habilidad distintiva de simplificar algunos de los conceptos tecnológicos más complejos; produciendo material que puede ser fácilmente entendido por cualquier novato en tecnología. Le apasiona escribir, desarrollar software interesante y viajar por el mundo (a través de documentales).
Suscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Un paso más…!
Confirme su dirección de correo electrónico en el correo electrónico que le acabamos de enviar.