Puoi utilizzare gradienti conici per creare effetti interessanti, come in questo esempio di bordo.
Questa classe CodePen creata da Adam Argyle, originariamente condivisa tramite questo tweet su Twitter, mostra come usare un gradiente conico per creare un bordo.
.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 ha forkizzato in modo creativo il codepen di Adam e ha creato questo CodePen. Sposta il mouse sull'elemento e vedrai il cambiamento del gradiente, grazie all'aggiornamento di JavaScript a una proprietà CSS personalizzata in cui è memorizzato l'angolo di rotazione.
In questi esempi viene utilizzata la proprietà border-image-source. Questa proprietà imposta l'immagine di origine utilizzata per creare il bordo di un elemento. Come con altre proprietà che accettano un valore di immagine, anche qualsiasi tipo di gradiente CSS è valido.
border-image-source
Gradiente conica