Gradientes cônicos podem ser usados para criar efeitos interessantes, como este bom exemplo de borda.
Este CodePen criado por Adam Argyle, originalmente compartilhado por este tweet no Twitter, mostra como usar uma cônica gradiente 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 com criatividade bifurcado o Codepen do Adam e criou CodePen. Passe o mouse sobre o ícone e você verá o gradiente mudar, graças a um pouco de JavaScript atualizar uma propriedade personalizada CSS que armazena o ângulo de rotação.
Esses exemplos usam
border-image-source
. Esta propriedade define a imagem de origem usada para criar a propriedade
borda. Assim como em outras propriedades que aceitam um valor de imagem, qualquer gradiente de CSS
também é válido.
border-image-source
Gradiente cônico