Gradientes cônicos podem ser usados para criar alguns efeitos interessantes, como este exemplo de borda.
Este CodePen criado por Adam Argyle, originalmente compartilhado por este tweet no Twitter, mostra como usar um gradiente de cônica para criar uma borda.
.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 bifurcou de forma criativa o codepen de Adam e criou este CodePen. Mova o mouse sobre o elemento para ver a mudança do gradiente graças a um pouco de código JavaScript atualizando uma propriedade personalizada de CSS que armazena o ângulo de rotação.
Nestes exemplos, usamos a
propriedade
border-image-source. Essa propriedade define a imagem de origem usada para criar a borda de um elemento. Tal como acontece com outras propriedades que aceitam um valor de imagem, qualquer tipo de gradiente CSS também é válido.
border-image-source
Gradiente cônico