Gradientes cónicos en CSS

Las hojas de estilo en cascada (CSS) le permiten agregar estilo a sus páginas web de numerosas maneras proporcionando una gama enorme de propiedades y métodos. Además de estos, CSS también proporciona gradientes que permiten la visualización de una transición uniforme de varios colores.

Hay un total de tres gradientes especificados en CSS que son, gradiente lineal, gradiente radial y gradiente cónico. En este tutorial, discutiremos los gradientes cónicos y aprenderemos a usarlos.

¿Qué es un gradiente cónico en CSS?

En CSS, un gradiente cónico es una función incorporada que le permite agregar gradientes como imágenes de fondo con transiciones de color alrededor de un punto medio.

Sintaxis

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

Debe especificar al menos dos colores para que el gradiente cónico () funcione, además, si no especifica el grado del color, los colores se extenderán uniformemente alrededor del punto medio.

Exploremos algunos ejemplos.

Ejemplo 1

El siguiente ejemplo demuestra el funcionamiento del gradiente cónica () utilizando tres colores.

Html

Aquí simplemente estamos creando un contenedor div para ilustrar el funcionamiento de los gradientes cónicos.

CSS

.div
Altura: 180px;
Ancho: 180px;
Image de fondo: gradiente cónico (rojo, verde, azul);

La altura y el ancho del DIV se establecen en 180px y estamos asignando tres colores básicos a la función de gradiente cónica (). Dado que no se especifica ningún grado de colores, por lo tanto, estos colores se extenderán uniformemente a través del punto medio del contenedor Div.

Producción

Un gradiente cónico con tres colores.

Ejemplo 2

El siguiente ejemplo demuestra el funcionamiento del gradiente cónica () utilizando cuatro colores.

CSS

.div
Altura: 180px;
Ancho: 180px;
Image de fondo: gradiente cónico (rosa, púrpura, verde, amarillo);

Aquí hemos asignado cuatro colores a la función de gradiente cónica ().

Producción

Un gradiente cónico con cuatro colores.

Ahora que tenemos una buena comprensión del concepto, exploremos cómo agregar grados a los gradientes cónicos en CSS con la ayuda de algunos ejemplos.

Ejemplo 3: Cómo agregar grados al gradiente cónico

El siguiente ejemplo demuestra la forma en que puede especificar los grados junto con los colores del gradiente cónico.

CSS

.div
IMAGEN DE FUNCIO: Gradiente cónico (rosa 45deg, púrpura 90 grados, amarillo 230deg);

En el código anterior, estamos especificando tres colores junto con el grado para cada color.

Producción

Un gradiente cónico con grados de color especificados.

Ejemplo 4: Cómo hacer gráficos circulares usando gradientes cónicos

Con el fin de hacer un gráfico circular, primero coloque el radio de borde del recipiente Div en 50% junto con cierta altura y ancho.

CSS

.div
Altura: 180px;
Ancho: 180px;
Radio fronterizo: 50%;
Image de fondo: gradiente cónico (rojo, verde, azul);

El radio fronterizo del elemento div se ha establecido en 50%.

Producción

Se ha generado con éxito una forma redondeada de gráfico circular.

Ahora puede crear un gráfico circular especificando un rango de grados de color en la función de gradiente cónica () como se muestra en el fragmento del código CSS a continuación:

CSS

.div
Altura: 180px;
Ancho: 180px;
Radio fronterizo: 50%;
IMAGEN DE ANTECEDENTES: Gradiente cónico (rojo 0deg, rojo 90deg,
verde 90deg, verde 180deg,
Azul 180deg, azul 270deg,
amarillo 270 grados, amarillo 360 grados);

En el código anterior, hemos especificado cuatro colores que son rojos, verdes, azules y amarillos. Ahora para cada color, se ha especificado un grado horizontal y vertical que cubre los 360 grados de un círculo.

Producción

Un gráfico circular con grados de color definidos.

Ejemplo 5: Cómo agregar un gradiente cónico desde un ángulo específico

Con el fin de agregar gradientes cónicos desde un ángulo particular, debe especificar ese ángulo en la función de gradiente cónica (). Así es como lo haces.

CSS

.div
Altura: 180px;
Ancho: 180px;
Radio fronterizo: 50%;
IMAGEN DE ANTECEDENTES: gradiente cónico (de 270 grados, rojo, verde, azul);

Aquí hemos especificado que los colores rojos, verdes y azules deben extenderse uniformemente desde un ángulo de 270 grados.

Producción

Se agrega con éxito un gráfico circular de gradiente cónico desde un ángulo especificado.

Ejemplo 6: Cómo agregar un gradiente cónico desde una posición específica

Dado que sabemos que los colores en un gradiente cónico se extienden de manera uniforme a través de un punto medio, por lo tanto, al definir la posición estamos definiendo el punto medio del gradiente cónico. Considere el ejemplo para aprender a hacerlo.

CSS

.div
Altura: 180px;
Ancho: 180px;
Radio fronterizo: 50%;
IMAGEN DE ANTECEDENTES: gradiente cónico (al 30% 45%, rojo, verde, azul);

En el código anterior hemos definido la posición de punto medio al 30% 45%.

Producción

Se agrega un gradiente cónico desde una posición específica.

Ejemplo 7: Cómo repetir un gradiente cónico

Con el fin de repetir un gradiente cónico, use la función repetitora-condicional (). Considere el ejemplo a continuación.

CSS

.div
Altura: 180px;
Ancho: 180px;
Radio fronterizo: 50%;
IMAGEN DE FINTER-IMAGE: gradiente de repetición (rosa 10deg, rosa 20 grados, amarillo 20 grados, amarillo 30 grados);

Aquí estamos utilizando la función repetitora-condicient () y usando dos colores junto con especificar sus grados.

Producción

Se insertó un gradiente cónico repetido

Conclusión

Un gradiente cónico en CSS es una función incorporada que le permite agregar gradientes con transiciones de color alrededor de un punto medio. Tienes que especificar al menos dos colores para hacer un gradiente cónico. Hay muchas cosas divertidas que puede hacer a un gradiente cónico, como especificar grados de color, ángulos o una posición. Además, usando los gradientes cónicos, también puede hacer gráficos circulares. En este artículo, discutimos los gradientes cónicos junto con numerosos ejemplos.