Una inmersión profunda en CSS en degradados radiales y cónicos

En este artículo, veremos más de cerca dos gradientes: conic-gradient y radial-gradient. Verás cómo funciona cada uno de ellos en detalle, cuáles son las diferencias y similitudes entre ellos, cómo y dónde usarlos, y algunos casos de uso para cada uno.

Los gradientes de CSS son una característica útil de CSS que se puede usar para crear efectos de interfaz de usuario interesantes o incluso ayudarnos a dibujar algo sin la necesidad de crear elementos HTML para ello. Dos gradientes en los que me gustaría centrarme en este artículo son conic-gradient y radial-gradient. Cada uno funciona de manera diferente (los degradados cónicos son curvos, mientras que los degradados radiales son una línea recta).

Para seguir, no necesitas saber nada de ninguno de los dos. radial-gradient o conic-gradient. Haré todo lo posible para explicarlos de una buena manera.

¡Vamos a sumergirnos!

¿Qué es un gradiente radial?

De su nombre, radial-gradientNos brindan la capacidad de dibujar elementos radiales como un círculo o una elipse.

Veamos la sintaxis más básica.

El ejemplo más básico

En este ejemplo, tenemos un radial-gradient con dos paradas de color. Esto resultó en un gradiente en forma de elipse.

.element {
    background: radial-gradient(#9c27b0, #ff9800);
}

 

Lo anterior es lo más básico. radial-gradient podemos hacer en CSS. Quizás se esté preguntando, ¿por qué por defecto es una elipse? Bueno, déjame explicarte.

Si no hay un nombre de forma definido en el degradado (círculo o elipse), por defecto será una elipse en caso de que:

• No hay tamaño determinado;
• O bien, hay dos valores (para el ancho y la altura).

¿Cómo funciona un degradado radial?

Revisaré una serie de imágenes que mostrarán cómo funciona un degradado al incrementar diferentes palabras clave y adiciones.

Primero, volvamos al ejemplo inicial.

.element {
    background: radial-gradient(#9c27b0, #ff9800);
}

Cuando hay dos colores sin identificar la forma, el degradado será por defecto una elipse, así:

 

La elipse está llenando el ancho y la altura de su contenedor. Se ve borroso porque el navegador asumió que los puntos de inicio y finalización son 0% y 100%, respectivamente.

Así es como el navegador ve el degradado:

.element {
    background: radial-gradient(#9c27b0 0%, #ff9800 100%);
}

si agregamos circle antes de la primera parada de color, así es como se ve:

.element {
    background: radial-gradient(circle, #9c27b0, #ff9800);
}

 

Ahora que tiene una idea de cómo se ven el círculo y la elipse de forma predeterminada, entremos posicionamiento.

Por defecto, ambos están centrados horizontal y verticalmente en su contenedor. En otras palabras, en 50% 50%:

 

Lo importante a notar aquí es que el posicionamiento ocurre desde el centro del círculo o elipse, por lo que colocamos un círculo en el top left, lo que se posicionará es el punto central.

Echemos un vistazo más de cerca a algunos ejemplos.

.element {
    background: radial-gradient(circle at top left, #9c27b0, #ff9800);
}

 

También podríamos centrarlo en el lado derecho. Agregando solo right centrará el círculo en el right 50%:

.element {
    background: radial-gradient(circle at right, #9c27b0, #ff9800);
}

Así es como se ve:

 

¿Qué es un gradiente cónico?

El conic-gradient() La función CSS crea un degradado que gira alrededor del centro del elemento. Veamos un ejemplo básico.

.element {
    background: conic-gradient(#9c27b0, #ff9800);
}

 

Mira cómo el degradado comienza desde el punto central del elemento. Gira desde 0deg a 360 por defecto.

Veamos qué sucede cuando agregamos un valor de parada dura para el primer color.

.element {
    background: conic-gradient(#9c27b0 50%, #ff9800);
}

 

Ahora el primer color llena 50% del elemento, mientras que el segundo se mostrará gradualmente hasta 100%.

¿Qué sucede si también aplicamos un tope duro en el segundo color? En el fragmento a continuación, el primer color llenará 50% del elemento, el segundo partirá de 50% hasta el final (100%).

.element {
    background: conic-gradient(#9c27b0 50%, #ff9800 0);
}

 

Aumentar el primer valor de parada de color creará un relleno en ángulo:

.element {
    background: conic-gradient(#9c27b0 65%, #ff9800 0);
}

 

No solo eso, sino que también podemos crear un degradado repetitivo usando la función CSS repeating-conic-gradient() Como se muestra abajo.

.element {
    background: repeating-conic-gradient(
    #9c27b0 0 15deg,
    #ff9800 15deg 30deg
    );
}

Los fragmentos anteriores llenan el primer color de 0deg a 15deg, entonces el segundo color se rellena desde 15deg a 30deg. Con la repetición, se verá como la siguiente figura:

 

Casos de uso para degradados radiales

A menudo, necesitamos agregar una ilustración o un patrón como fondo. En caso de que haya un titular y/o texto secundario, puede ser difícil leerlos, por supuesto.

radial-gradient En una sección de héroe

Usar un degradado de elipse con el mismo color que el fondo puede ayudar a que el contenido se destaque. En el siguiente ejemplo, observe cómo el contenido se superpone con el fondo. Hace que sea un poco más difícil concentrarse en leer que mirar el patrón:

 

Una solución común para eso es agregar una elipse con el mismo color que el fondo debajo (para que se mezcle con él).

Aquí está la sección principal con la elipse (coloreada en gris, solo para fines de demostración):

 

Aquí está cómo reflejar eso en CSS:

.hero {
    background-color: #fbfafa;
    background-image: radial-gradient(#fbfafa, rgba(0,0,0,0) center/70% 70% no-repeat, url("hero-bg.svg");
    background-position: center;
    background-size: 70% 70%, cover;
    background-repeat: no-repeat;
}

 

De esa manera, cubrimos el patrón debajo del contenido, ahora es mucho más fácil leerlo.

Efecto de patrón punteado

Para crear un efecto de un patrón punteado, podemos usar radial-gradient. Así es como se ve:

 

Para lograr eso, podemos crear un pequeño círculo y el resto del degradado será transparente.

Así es como se ve por sí solo:

 

Cuando se repite este patrón, así es como se ve:

 

Para reflejar eso en CSS, necesitamos agregar un ancho y alto para el degradado. Dado que los degradados se repiten de forma predeterminada, dará como resultado el patrón anterior.

.dot-pattern {
  --color-1: #9c27b0;
  --color-2: rgba(0,0,0,0);
  background-image: radial-gradient(circle at 2px 2px, var(--color-1) 1px, var(--color-2) 0);
  background-size: 15px 15px;
}

Efectos de imagen

Combinado con mix-blend-mode, los degradados radiales pueden crear algunos efectos de interfaz de usuario interesantes para las imágenes. En el siguiente ejemplo, observe cómo se coloca el círculo en la esquina superior izquierda. Podemos beneficiarnos de eso jugando con los modos de mezcla para lograr un efecto específico.

 

.thumb:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, #9c27b0, #ff9800);
    mix-blend-mode: hard-light;
    opacity: 0.4;
}

Casos de uso para gradientes cónicos

Gráficos circulares

El primer caso de uso que se me ocurre para los gradientes cónicos son los gráficos circulares simples. Ha sido algo que queríamos hacer en CSS hace un tiempo, y ahora es posible con facilidad.

 

.pie-chart {
    width: 100px;
    height: 100px;
    background: conic-gradient(from 0deg, #b2daf9 128deg, #2096f3 0);
    border-radius: 50%;
}

Fondos Y Patrones

Hay toneladas de posibilidades para crear un patrón con gradientes cónicos. Para este ejemplo, me centraré en el patrón de tablero de ajedrez.

 

Esto es lo que sucede en el siguiente gradiente:

• El #fff el color esta cubriendo 90deg del elemento;
• Luego le sigue #000 a 180deg;
• Luego le sigue #fff a 270deg;
• Finalmente, el #000 lleno hasta el ángulo final (360deg).

.checkerboard {
    --size: 25px;
    width: 200px;
    height: 100px;
    background-image: conic-gradient(#fff 90deg, #000 0 180deg, #fff 0 270deg, #000 0);
    background-size: var(--size) var(--size);
}

Cuando se repite y se controla mediante background-size, se verá así:

 

No solo eso, sino que podemos conseguir efectos realmente interesantes rotando algunos valores de forma diferente. Aquí hay un ejemplo:

.element {
    background-image: conic-gradient(#fff 90deg, #000 0 136deg, #fff 0 313deg, #000 0);
}

 

Patrones de interfaz de usuario

A veces, es posible que necesitemos generar un patrón de interfaz de usuario aleatorio que tome diferentes formas. Nosotros podemos usar conic-gradient para lograr eso La idea es que controlemos el tamaño del gradiente a través de background-size, y luego cambie el conic-gradient ángulo para lograr diferentes efectos.

Tenemos un elemento con una anchura y una altura de 200px. Dentro de este elemento, repetiremos el fondo.

.element {
    --size: 20px;
    width: 200px;
    height: 200px;
    background-size: var(--size) var(--size);
}

Para imaginarlo mejor, cada fondo tendrá un tamaño de 20px tanto para el ancho como para el alto, y se repetirá en horizontal y en vertical.

 

Ahora, cada cuadrado que veas contendrá un conic-gradient. Por ahora, agregaré dos tonos de azul para demostrar mejor el concepto.

.element {
    --size: 20px;
    width: 200px;
    height: 200px;
    background: conic-gradient(#2296F3 0.13turn, rgba(255,255,255,0) 0);
    background-size: var(--size) var(--size);
}

Así queda el degradado cónico sin repetirlo:

 

Con la repetición, se ve así. Ahora, el objetivo es hacer que el segundo color sea transparente, lo que dará como resultado una forma de triángulo.

 

Al tener un ángulo diferente, podemos aleatorizar la forma del patrón para obtener efectos interesantes.

 

Animación de degradados cónicos con @property

Podemos crear interesantes efectos de animación con conic-gradient. Sin embargo, esto no es posible de forma predeterminada. Necesitamos usar el @property definición para definir una propiedad personalizada que usaremos para la animación.

@property --conic-mask {
    syntax: '';
    inherits: false;
    initial-value: 0%;
}

.conic-mask {
    --conic-mask: 0%;
    -webkit-mask: conic-gradient(from 0deg at 50% 50%, #000 var(--conic-mask), #0000);
    transition: --conic-mask 1s ease-out;
}

.conic-mask: hover {
    --conic-mask: 100%;
}

Corte esquinas con formas personalizadas

Esta es una demostración de Acompaña Afif. La idea es usar conic-gradient como máscara para crear efectos de esquinas recortadas:

Gradientes cónicos

Nosotros podemos usar conic-gradient para crear sutiles efectos de degradado que tienen esquinas más oscuras o esquinas más claras con otros colores. cónica.css es una pequeña biblioteca CSS de Adam Argyle que presenta muchos gradientes cónicos encantadores.

 

Uso de degradados cónicos para fondos de sección

Vi esto en una demostración compartida por Scott Kellum. Realmente me gustó la forma en que funciona la técnica para agregar un color parcial a un pie de página mientras que al mismo tiempo se ve suave.

.footer {
    background: conic-gradient(from 0.25turn at 25% 0%, #FFD9CE, rgba(#FFD9CE, 0) 50%);
}

 

Conclusión

Como has visto, usando CSS radial-gradient y conic-gradient Las funciones pueden resultar en interfaces de usuario muy interesantes (y útiles). Sin embargo, no hay blanco y negro cuando se trata de cuándo usar cada uno. La mayoría de las veces, depende del caso de uso en cuestión.

Espero que encuentres útil el artículo. ¡Muchas gracias por leer!