Generatore di bordo sfumato (CSS)
Scegli i colori, lo spessore e gli angoli. Il codice usa due livelli di sfondo, il metodo che mantiene funzionante il border-radius.
Come si usaBordo colorato sfumato
Disponibile in: 
Generatore di bordo sfumato (CSS): a cosa serve
Il modo più ovvio per fare un bordo sfumato, border-image, ignora gli angoli arrotondati. Questo generatore usa la tecnica dei due livelli di sfondo (padding-box e border-box), che mantiene il border-radius, oppure una maschera con mask-composite quando la card deve avere lo sfondo trasparente.
Scegli due o tre colori, l’angolo, lo spessore e gli angoli, e opzionalmente il bordo rotante, fatto con conic-gradient e una variabile d’angolo registrata con @property, disattivato per chi ha chiesto meno movimento.
Come si usa
- Scegli i colori e l’angolo.
- Regola spessore, angoli e sfondo.
- Copia il CSS e applica la classe.
Quando usarlo
- Card di un piano in evidenza.
- Foto del profilo con bordo colorato.
- Pulsante di invito all’azione principale.
Domande frequenti
Perché non usare border-image?
Con border-image la sfumatura funziona, ma gli angoli arrotondati (border-radius) vengono ignorati. La tecnica di questo generatore dipinge la sfumatura come un secondo livello di sfondo che compare solo nell’area del bordo, e così gli angoli restano rotondi.
E se lo sfondo della card è trasparente?
Seleziona l’opzione sfondo trasparente: il codice passa a usare una maschera (mask) per ritagliare il centro, e ciò che sta dietro la card si vede all’interno del bordo.
Come funziona il bordo rotante?
La sfumatura è conica e l’angolo è una variabile registrata con @property, che il CSS riesce ad animare. Per chi ha chiesto meno movimento, l’animazione è disattivata.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.