Se pueden usar gradientes cónicos para crear algunos efectos interesantes, como este ejemplo de borde agradable.
Este CodePen creado por Adam Argyle y que originalmente se compartió a través de este tweet en Twitter 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 bifurcó el código de Adam de forma creativa y creó este CodePen. Mueve el mouse sobre el elemento y verás el cambio de gradiente, gracias a que JavaScript actualiza la 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