Gradiente de fondo CSS | Explicado

Un color de gradiente es uno que se compone de dos o más tonos. En el desarrollo web, los diseñadores utilizan diferentes colores en aplicaciones para que sean atractivos visualmente. Más específicamente, los gradientes de CSS son una clase única de imagen que proporciona un cambio gradual entre los colores complementarios. Estos gradientes son de tres tipos principales: lineal, radial y cónica. Puede utilizarlos para agregar colores de gradiente a los elementos.

Este tutorial proporcionará una guía detallada sobre los gradientes de CSS.

¿Cuáles son los tipos de gradientes de CSS??

Los tipos de funciones de gradiente CSS se enumeran a continuación:

• gradiente lineal()
• gradiente cónico ()
• gradiente radial ()
• Repetición-gradiente-lineal ()
• Repiting-cónico-gradiente ()
• repetición-gradiente-gradiente ()

Cada propiedad se discutirá en detalle con demostraciones prácticas.

Método 1: Cómo agregar gradiente lineal en CSS?

En CSS, se crea un gradiente lineal con el "gradiente lineal()" función. Para utilizarlo, consulte el siguiente ejemplo.

Ejemplo 1: Agregar gradiente lineal simple en CSS

En HTML, dentro del elemento del cuerpo, agregue un DIV con múltiples clases "rectángulo de gradiente simple". Haremos un cuadro con contenido de clase Div en el que aplicaremos diferentes propiedades de gradiente.

Html

Las dos clases que se mencionan en el código HTML se aplican con estilos utilizando CSS.

Estilo "Rectángulo" Div

.rectángulo
Ancho: 90%;
Altura: 200px;
margen: auto;

Aquí:

"ancho" y "altura"La propiedad se determina el tamaño del elemento vertical y horizontalmente. "margen"La propiedad genera un espacio igual alrededor del elemento.

Estilo Div "Diver" con gradiente simple "

.gradiente simple
fondo: gradiente lineal (azul, negro);

El Div-Div Simple-Div recibe la propiedad "fondo"Con el valor"gradiente lineal()" función. Esta función está provista de dos colores, azul y negro, como parámetros.

Guarde el archivo y ábralo en el navegador. La salida se mostrará como se muestra a continuación:

Ejemplo 2: Agregar gradiente lineal usando ángulos en CSS

Para controlar la dirección de los colores, los ángulos también se pueden especificar de la siguiente manera:

.Gradiente de ángulo
fondo: gradiente lineal (40 grados, amarillo, rojo);

Producción

Ejemplo 3: Agregar gradiente lineal usando más de dos colores en CSS

No está restringido a usar solo dos colores. Como diseñador, puede utilizar tantos colores como desee. Por defecto, los colores están espaciados uniformemente. Por ejemplo:

Antecedentes: gradiente lineal ( #181818, #8758FF, #EAF290, #5CB8E4, #F2F2F2, #182747);

Producción

Ejemplo 4: Agregar gradiente lineal especificando paradas de color en porcentajes en CSS

Aquí, los colores especificados con los porcentajes comienzan en el valor especificado:

Antecedentes: gradiente lineal (a la izquierda, #00f5ff 20px, #FCE700 40%, #FF6D28 60%, #EA047E 2PX);

Producción

Ejemplo 5: Agregar gradiente lineal para líneas duras en CSS

Para hacer una línea dura entre los colores, las dos o más paradas de color se utilizan en el mismo lugar. En la función de gradiente lineal () primero, especifique la dirección, luego colores con porcentaje:

Antecedentes: gradiente lineal (para arriba a la derecha, #00ABB3 45%, #3C4048 45%);

Al proporcionar la misma ubicación a los colores, obtenemos el resultado que se muestra en la imagen a continuación:

Ejemplo 6: Agregar gradiente lineal usando pistas de color en CSS

El gradiente transición uniformemente de color a color. Puede especificar la pista de color para mover el punto medio de la transición. El porcentaje está establecido en "50%"Para que el gradiente haga la transición del color de azul a rojo:

fondo: gradiente lineal (azul, 50%, rojo);

Producción

Método 2: Cómo agregar gradiente cónico en CSS?

Un gradiente cónico especifica las transiciones de color rotadas alrededor de un centro. Está diseñado utilizando el "gradiente cónico ()" función. Para utilizarlo, se deben definir al menos dos colores. Además, por defecto, el ángulo es "0"Deg y la posición se establece como"centro".

Sintaxis

IMAGEN DE ANTECEDENTES: gradiente cónico ([desde el ángulo] [en la posición,] color [grado], color [grado], ...);

La función de gradiente cónica () recibe tres colores como parámetros:

IMAGEN DE ANTECEDENTES: Gradiente cónico ( #FF5858, #E0144C, #9A1663);

Producción

Ejemplo 1: Agregar gráfico circular cónico en CSS

La función de gradiente cónica () nos proporciona la instalación para crear gráficos circulares. Para esto, se requiere especificar los colores con ángulos de inicio y finalización. Más específicamente, para crear distintos sectores de color, el valor del ángulo de inicio del siguiente color debe ser igual o menor que el valor del ángulo final del primer color.

Antecedentes: gradiente cónico (azul 50 grados, rojo 50deg 120 grados, naranja 120 grados);

Producción

Ejemplo 2: Agregar gradiente cónico usando ángulos en CSS

El gradiente cónico es circular y el centro del elemento actúa como el punto de origen de la parada de color. Hay 0 grados a 360 grados en el ángulo de gradiente cónico:

IMAGEN DE ANTECEDENTES: Gradiente cónico (de 70deg, #F1D4D4, #6A097D);

Se puede ver que el color giró de los 70 grados:

Método 3: Cómo agregar gradiente radial en CSS?

Se puede crear un gradiente radial con el "gradiente radial ()" función. Esta función produce una imagen que consiste en una transición gradual entre múltiples colores que se utilizan para irradiar desde el punto central. Podría ser una elipse o un círculo.

El siguiente código muestra el "fondoPropiedad "con el valor como una función de gradiente radial:

Antecedentes: gradiente radial (círculo, RGBA (241, 151, 216, 1) 28%, RGBA (148, 187, 233, 1) 59%);

Producción

Ejemplo: Agregar radial no centrado en CSS

El siguiente ejemplo muestra cómo hacer un gradiente radial no centrado.

IMAGEN DE ANTECEDENTES: Gradial Radial (esquina más lejana a 60px 90px,
#FF9F30 0%,
#B60C3C 100%);

Producción

Método 4: Cómo agregar gradientes lineales repetidos en CSS?

La función "Repetición-gradiente-lineal ()"Diseñó una imagen a lo largo de los gradientes lineales repetidos. Toma los parámetros como colores, grados o porcentajes.

Antecedentes: Repiting-lineal-gradiente (25 grados, #00A8CC, #142850 23.3%);

Producción

Método 5: Cómo agregar gradientes radiales repetidos en CSS?

El "repetición-gradiente-gradiente ()"La función genera una imagen que consiste en repetir gradientes que irradian desde el centro.

Antecedentes: gradiente de radio repetición ( #313131, #CA3E47 30%);

Producción

Método 6: Cómo agregar gradientes cónicos repetidos en CSS?

El "Repiting-cónico-gradiente ()"La función produce una imagen que consiste en un gradiente repetido. Estas transiciones de color giran alrededor de un punto central.

Aquí hay un ejemplo para demostrar el gradiente cónico repetido:

Antecedentes: Repiting-Conic-Gradient (de 74 grados al 86% 50%,
#A21232 0deg 15deg,
#1A1831 10deg 21deg,
#Dece9c 20deg 31deg);

Producción

De esta manera, los gradientes de fondo CSS se utilizan en CSS.

Conclusión

HTML proporciona muchos métodos para hacer que los documentos atractivos y atractivos. Estos métodos incluyen colores, formato de texto, gradientes y más. Los gradientes de CSS son las imágenes especiales que muestran transiciones de color entre dos o más colores. El elemento de fondo utiliza principalmente funciones de gradiente. Esta publicación proporcionará una guía sobre el gradiente de fondo CSS.