Usar gradientes cónicos para crear un borde frío

Los gradientes cónicos se pueden usar para crear algunos efectos interesantes, como este bonito ejemplo de borde.

Este CodePen creado por Adam Argyle, que se compartió originalmente a través de este tuit en Twitter muestra cómo usar una línea cónica gradiente en 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 de manera creativa bifurcado el códec de Adam y creó este CodePen. Mueve el mouse sobre el y verás el cambio de gradiente, gracias a un poco de JavaScript actualizar una propiedad personalizada de CSS que almacena el ángulo de rotación

En estos ejemplos, se usa el border-image-source propiedad. Esta propiedad establece la imagen de origen que se usa para crear la interfaz borde. Al igual que con otras propiedades que aceptan un valor de imagen, cualquier gradiente de CSS tipo también es válido.

border-image-source

Navegadores compatibles

  • Chrome: 15.
  • Límite: 12.
  • Firefox: 15.
  • Safari: 6.

Origen

Gradiente cónico

Navegadores compatibles

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

Origen