Una hoja de estilo CSS describe cómo se presentan las páginas web, incluidos sus colores, diseños y fuentes. Hay muchas propiedades que se utilizan para crear páginas web atractivas, como color, fondo, imagen de fondo, gradiente y muchas otras. Más específicamente, los gradientes se usan para agregar múltiples colores al fondo.

En este artículo, discutiremos los gradientes de CSS. Entonces, comencemos!

¿Qué son los gradientes de CSS??

En CSS, el "degradado"Le permite mostrar suavemente la transición entre diferentes colores. También puede mostrar diferentes colores a la vez para mejorar el aspecto de los elementos HTML. Hay tres tipos de gradientes que son:

• Gradiente lineal
• Gradiente radial
• Gradiente cónico

Ahora, exploraremos cada uno de los tipos de gradiente mencionados uno por uno! Para este propósito, primero, crearemos un DIV en el HTML y luego aplicaremos un "degradado".

Ejemplo

En HTML, crearemos un contenedor o un DIV con el nombre de la clase "div"Y dentro del""Etiqueta, agregue un encabezado

.

Html

Degradado

Ahora, pasaremos al archivo CSS y usaremos "div"Para acceder al contenedor creado en HTML y establezca la altura del DIV como"200px". Después de eso, configure el color del encabezado como "RGB (1, 32, 4)"Y el tamaño de la fuente como"35px". A continuación, agregue el borde alrededor del Div, ancho como "5px", Estilo como"cresta", Y color como"RGB (0, 0, 0)".

CSS

div
Altura: 200px;
Color: RGB (1, 32, 4);
tamaño de fuente: 35px;
borde: 5px cresta rgb (0, 0, 0);

Usando el código anterior, se obtiene la siguiente salida:

Ahora, aplicaremos los tipos de gradiente en el div.

¿Qué son los gradientes lineales de CSS??

Para generar un gradiente lineal, el "gradiente lineal()"La función del CSS se usa como un valor del"imagen de fondo" o "fondo" propiedad. Con esta función, se puede crear una imagen que se compone de una progresión similar a una línea de diferentes colores. Hay varios tipos de gradientes lineales, como repetir gradientes lineales, gradientes de izquierda a derecha y gradientes de derecha a izquierda.

Sintaxis

La sintaxis del "gradiente lineal()"La función es:

Image de fondo: gradiente lineal (dirección, color-1, color-2, ...);

Aquí el "direcciónEl parámetro se utiliza para establecer la dirección del gradiente lineal desde el cual se iniciará la transición, como para arriba, derecha, izquierda e inferior. Puede agregar múltiples colores a esta función.

Como continuación del ejemplo anterior, aplicaremos un simple "gradiente lineal()"Funciona para el Div.

Ejemplo

Aquí, usaremos el "gradiente lineal()"Función en el"imagen de fondo"Propiedad y agregar dirección como"hasta arriba"; Esta es la dirección predeterminada de la función. Después de eso, agregaremos tres color como "RGB (0, 255, 213)","RGB (187, 255, 0)", y "RGB (51, 255, 0)"Para nuestro gradiente:

div
…
IMAGEN DE ANTECEDENTES: Gradiente lineal (arriba, RGB (0, 255, 213), RGB (187, 255, 0), RGB (51, 255, 0));

En la imagen proporcionada a continuación, puede ver que se genera un gradiente lineal:

Ahora, avance al siguiente tipo en el que cambiaremos la dirección del gradiente lineal como "a derecha".

Gradiente lineal a la derecha

Para generar un gradiente lineal a la derecha, cambiaremos la dirección de "hasta arriba" a " a derecha"Y establece cinco colores diferentes como"RGB (32, 42, 134)","RGB (202, 231, 255)","RGB (0, 255, 170)","RGB (85, 250, 79)", y "RGB (128, 243, 138)":

div
…
IMAGEN DE ANTECEDENTES: Gradiente lineal (a la derecha, RGB (32, 42, 134), RGB (202, 231, 255), RGB (0, 255, 170), RGB (85, 250, 79), RGB (128 , 243, 138));

En la siguiente salida, puede ver que el gradiente lineal se crea en la dirección correcta:

A continuación, cambiaremos la dirección del gradiente lineal a "a la izquierda".

Gradiente lineal a la izquierda

Aquí, cambiaremos la dirección a "a la izquierda". Los colores se utilizarán igual que en el ejemplo anterior:

div
…
IMAGEN DE ACTUALO: Gradiente lineal (a la izquierda, RGB (32, 42, 134), RGB (202, 231, 255), RGB (0, 255, 170), RGB (85, 250, 79), RGB (128 , 243, 138));

Puede ver en la salida a continuación que el gradiente lineal a la izquierda se crea perfectamente:

También puede crear una transición repetida de colores. Entonces, hagamos esto!

Repetir gradientes lineales

Para crear gradientes lineales repetidos, el "Repiting-lineal-gradientes ()Se utiliza la función. En este tipo de gradiente lineal, la secuencia del color se repite de acuerdo con el valor dado.

Sintaxis

La sintaxis del "Repiting-lineal-gradientes ()" es:

IMAGEN DE FINTER-IMAGE: Distribuimiento-Gradiente-Líneo (Color Color-Longitud, Color Color-Stop-longitud, ...);

En la sintaxis anterior, "color-par-longitud"Se utiliza para establecer la distancia entre las paradas de color primera y la última que determina la longitud del gradiente que se repite.

Continuemos con el ejemplo anterior.

Ejemplo

Aquí, estableceremos el color del texto como "blanco"Y agregue el valor de los colores de gradiente en el"Repiting-lineal-gradientes ()"Funciones. Además de cada color, especificaremos el "Longitud de parada de color" como "0px","20px", y "40px". Se usa para repetir los colores después de la longitud dada:

div
…
color blanco;
IMAGEN DE ACTUALO: gradiente de repetición-lineal (RGB (122, 12, 145) 0px, RGB (171, 76, 209) 20px, RGB (13, 0, 128) 40px);

Nota: Sin el "color-par-longitud"Valor, el gradiente lineal no se puede establecer para la repetición.

En la imagen proporcionada a continuación, puede ver que el gradiente lineal se repite:

¿Qué son los gradientes radiales CSS??

Un gradiente radial es una transición de colores donde la transición comienza desde el origen del elemento. Para crear un gradiente radial, el "gradiente radial ()Se utiliza la función en la que puede especificar la forma de la transición y los colores.

Sintaxis

La sintaxis del "gradiente radial ()"La función es:

IMAGEN DE ANTECEDENTES: gradiente radial (forma, color de inicio, ..., último color);

Puedes configurar la forma del "gradiente radial ()"Funciona como un"elipse" o "círculo".

Ejemplo

Aquí, continuaremos el ejemplo anterior y usaremos el "gradiente radial ()"Función para establecer la forma de la transición como un"elipse". A continuación, agregaremos cinco colores diferentes como "RGB (17, 0, 255)","RGB (0, 174, 255)","RGB (109, 250, 255)","RGB (0, 190, 79)", y "RGB (2, 70, 2)":

div
…
IMAGEN DE ANTECEDENTES: Gradiente radial (Ellipse, RGB (17, 0, 255), RGB (0, 174, 255), RGB (109, 250, 255), RGB (0, 190, 79), RGB (2, 70, 2));

La imagen proporcionada a continuación indica que la transición del color comenzó con éxito desde el origen del elemento:

Ahora, pasaremos al último tipo de gradiente.

¿Qué son los gradientes cónicos de CSS??

El "gradiente cónico ()La función se utiliza para crear un gradiente cónico. Es un gradiente donde las transiciones de colores se giran alrededor de un punto central. Para crear un gradiente cónico, se deben definir al menos dos colores.

Sintaxis

La sintaxis del "gradiente cónico ()"La función es:

Image de fondo: gradiente cónico (color, color, ... color);

Puede establecer múltiples colores en la función del "gradiente cónico ()".

Pasemos al ejemplo en el que crearemos el gradiente cónico.

Ejemplo

Ahora estableceremos el color del encabezado como "blanco". A continuación, usa el "gradiente cónico ()"Funciona y crea un gradiente cónico arcoiris agregando colores del arco iris, como"rojo","naranja","amarillo","verde","azul","índigo", y "Violeta":

div
color blanco;
IMAGEN DE FINTA: gradiente cónico (rojo, naranja, amarillo, verde, azul, índigo, violeta);

Aquí está el resultado que demuestra que el gradiente cónico se crea con éxito:

Eso es todo! Hemos explicado el gradiente de CSS en detalle.

Conclusión

El CSS "degradado"Le permite mostrar transiciones suaves entre dos o más colores especificados. Hay tres tipos de funciones de gradiente utilizadas como un valor de "fondo"Propiedad en CSS, como"gradiente lineal()","gradiente radial ()", y "gradiente cónico ()". En este manual, hemos explicado el gradiente de CSS y sus tipos en detalle.