Los gradientes cónicos se pueden usar para crear algunos efectos interesantes, como este bonito ejemplo de borde.
En este CodePen creado por Adam Argyle, que se compartió originalmente a través de este tweet en Twitter, se muestra cómo usar un gradiente cónico para crear un borde.
.conic-gradient-border {
border: 25px solid;
border-image-slice: 1;
border-image-source: conic-gradient(
hsl(100 100% 60%),
hsl(200 100% 60%),
hsl(100 100% 60%)
);
}
Terry Mun creó una bifurcación creativa del codepen de Adam y creó este CodePen. Coloca el mouse sobre el elemento y verás que cambia el gradiente, gracias a un poco de JavaScript que actualiza una propiedad personalizada de CSS que almacena el ángulo de rotación.
En estos ejemplos, se usa la propiedad border-image-source
. Esta propiedad establece la imagen de origen que se usa para crear el borde de un elemento. Al igual que con otras propiedades que aceptan un valor de imagen, cualquier tipo de gradiente de CSS también es válido.
border-image-source
Gradiente cónico