Generatore Bordo Sfumato CSS
Genera codice CSS per bordi sfumati istantaneamente con anteprima in tempo reale.
135°
0%
100%
Anteprima
Codice CSS
.element {
background:
linear-gradient(#1a1a2e, #1a1a2e) padding-box,
linear-gradient(135deg, #6366f1 0%, #ec4899 100%) border-box;
border: 3px solid transparent;
border-radius: 12px;
}Cos'è un bordo sfumato CSS?
CSS non supporta colori di bordo sfumati tramite border-color. Questo strumento usa il trucco background-clip — sovrapponendo due sfondi ritagliati rispettivamente su padding-box e border-box.
Tipi di Sfumatura
Sfumatura Lineare
I colori transitano in linea retta all'angolo specificato. Ideale per effetti di bordo direzionali come dall'alto verso il basso o in diagonale.
Sfumatura Conica
I colori ruotano attorno a un punto centrale. Applicato al bordo, crea un effetto arcobaleno che avvolge l'intero elemento.
Come usare
Seleziona un tipo di sfumatura (Lineare o Conico), imposta l'angolo e i punti di colore, regola lo spessore e il raggio del bordo, poi copia il codice CSS generato.
Domande Frequenti
Posso applicare uno sfumato direttamente a border-color?
No. CSS border-color supporta solo colori solidi. Questo strumento usa il trucco background-clip per creare bordi sfumati senza JavaScript.
Qual è la differenza tra bordi con sfumatura lineare e conica?
La sfumatura lineare scorre in una direzione (es. dall'alto verso il basso). La sfumatura conica ruota attorno all'elemento, mostrando tutti i colori lungo l'intero bordo.
È supportato in tutti i browser?
Il metodo background-clip funziona nelle versioni moderne di Chrome, Firefox, Safari ed Edge. Internet Explorer non è supportato.
Come si usa un bordo sfumato con Tailwind CSS?
Tailwind non supporta nativamente i bordi sfumati. Aggiungi il CSS generato in @layer utilities o applicalo come stile inline.
Cos'è un bordo con gradiente conico?
Un bordo con gradiente conico applica colori che ruotano attorno a un punto centrale, creando effetti arcobaleno o di rotazione.
Posso animare un bordo sfumato?
Sì. Puoi animare l'angolo di conic-gradient usando @keyframes e proprietà CSS personalizzate per creare un bordo sfumato rotante.