Usar gradientes cônicos para criar uma borda fria

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

Compatibilidade com navegadores

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

Origem

Gradiente cônico

Compatibilidade com navegadores

  • Chrome: 69.
  • Borda: 79.
  • Firefox: 83.
  • Safari: 12.1.

Origem