Usar gradientes cônicos para criar uma borda fria

Gradientes cônicos podem ser usados para criar alguns efeitos interessantes, como este exemplo de borda.

Este CodePen criado por Adam Argyle, originalmente compartilhado neste tweet no Twitter, mostra como usar um gradiente cônico 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 criou uma bifurcação do codepen de Adam e criou este CodePen. Mova o mouse sobre o elemento e você vai notar que o gradiente muda, graças a um pouco de JavaScript que atualiza uma propriedade personalizada do CSS que armazena o ângulo de rotação.

Estes exemplos usam a propriedade border-image-source. Essa propriedade define a imagem de origem usada para criar a borda de um elemento. Assim como outras propriedades que aceitam um valor de imagem, qualquer tipo de gradiente CSS também é válido.

border-image-source

Compatibilidade com navegadores

  • Chrome: 15.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 6.

Origem

Gradiente cônico