27 elegantes ejemplos de degradado de fondo CSS

Mantenerse actualizado sobre las principales tendencias y estándares de diseño web es muy importante para un diseñador o desarrollador. Actualmente, los degradados de fondo se utilizan ampliamente en sitios web modernos.

En este artículo, lo guiaremos a través de diferentes ejemplos de degradados de fondo utilizando CSS.

Gradientes de fondo usando CSS

El degradado CSS muestra una transición suave utilizando dos o más colores especificados. El gradiente CSS proporciona un mejor control y rendimiento sobre el uso de un archivo de imagen real (de un gradiente). los imagen de fondo La propiedad CSS se utiliza para declarar degradados como fondo.

alguien envió una solicitud de energía para mostrar el controlador

Hay tres tipos de gradientes: lineal (creado con el gradiente lineal() función), radial (creado con gradiente radial () función), y cónico (creado con el gradiente cónico () función). Además, puede crear degradados repetidos con el gradiente-lineal-repetido () , gradiente-radial-repetido () , y gradiente-cónico-repetitivo () funciones.

MDN Docs define estas funciones como:

gradiente lineal() : La función CSS linear-gradient () crea una imagen que consiste en una transición progresiva entre dos o más colores a lo largo de una línea recta. Su resultado es un objeto de la tipo de datos, que es un tipo especial de .

gradiente radial () : Los gradiente radial () La función CSS crea una imagen que consiste en una transición progresiva entre dos o más colores que irradian desde un origen. Su forma puede ser un círculo o una elipse. El resultado de la función es un objeto de la tipo de datos, que es un tipo especial de .

gradiente cónico () : Los gradiente cónico () La función CSS crea una imagen que consiste en un degradado con transiciones de color giradas alrededor de un punto central (en lugar de irradiar desde el centro). Ejemplos de degradados cónicos incluyen gráficos circulares y ruedas de colores. El resultado de la gradiente cónico () La función es un objeto de la tipo de datos, que es un tipo especial de .

gradiente-lineal-repetido () : Los gradiente-lineal-repetido () La función CSS crea una imagen que consta de gradientes lineales repetidos. Es similar a gradient / linear-gradient () y toma los mismos argumentos, pero repite las paradas de color infinitamente en todas las direcciones para cubrir todo su contenedor. El resultado de la función es un objeto de la tipo de datos, que es un tipo especial de .

gradiente-radial-repetido () : Los gradiente-radial-repetido () La función CSS crea una imagen que consiste en degradados repetidos que irradian desde un origen. Es similar a gradient / radial-gradient () y toma los mismos argumentos, pero repite las paradas de color infinitamente en todas las direcciones para cubrir todo su contenedor, similar a gradient / repeating-linear-gradient (). El resultado de la función es un objeto de la tipo de datos, que es un tipo especial de .

gradiente-cónico-repetitivo () : Los gradiente-cónico-repetitivo () La función CSS crea una imagen que consta de un degradado repetido (en lugar de un degradado único) con transiciones de color giradas alrededor de un punto central (en lugar de irradiar desde el centro).

Aquí está la sintaxis oficial de cada tipo de gradiente.

Sintaxis oficial de degradados lineales

|_+_|

Sintaxis oficial de gradientes radiales

|_+_|

Sintaxis oficial de gradientes cónicos

|_+_|

Aquí hay algunos ejemplos de gradientes de fondo increíbles que pueden mejorar la interfaz de usuario de su sitio web al siguiente nivel.