Generatore di bordi sfumati CSS

Come funziona

1. Scegli i colori: seleziona due o più colori per il gradiente tramite i selettori.
2. Regola la larghezza e il raggio: regola lo spessore e l'arrotondamento degli angoli secondo il tuo design.
3. Copia il CSS: il codice generato tramite border-image o la tecnica di pseudo-elemento è pronto da incollare nel tuo foglio di stile.

Perché usare questo generatore di bordo a gradiente?

I bordi a gradiente CSS sono un dettaglio di design d'effetto usato nei framework UI moderni, nelle card, negli stati hover dei pulsanti e nelle sezioni in evidenza. Tuttavia, la proprietà CSS border accetta solo colori solidi, creare un bordo a gradiente richiede un trucco tramite border-image o uno pseudo-elemento con manipolazioni di background-clip. Questo generatore copre entrambe le tecniche e produce CSS pulito, pronto da copiare, per concentrarti sul design invece che sulla sintassi.

Funzionalità

• Due metodi: scegli tra border-image (semplice) e la tecnica dello pseudo-elemento con background-clip (gestisce il border-radius).
• Supporto del border-radius: il metodo dello pseudo-elemento permette angoli arrotondati che border-image non sa produrre.
• Gradienti multi-stop: aggiungi tutti gli stop di colore che vuoi per effetti arcobaleno o nei colori del tuo brand.
• Anteprima dal vivo: vedi esattamente il rendering del bordo prima di copiare il codice.
• Controllo dell'angolo: ruota la direzione del gradiente con un selettore d'angolo visivo.

Domande frequenti

Perché non posso usare border-image con border-radius?

border-image sostituisce interamente il rendering del bordo e ignora border-radius, gli angoli restano quadrati. Per combinare bordo a gradiente e angoli arrotondati, usa la tecnica dello pseudo-elemento: applica il gradiente come sfondo di un ::before e background-clip: padding-box sull'elemento stesso.

Posso animare bordi a gradiente?

Sì. I bordi a gradiente creati con il metodo background + pseudo-elemento possono essere animati transitando background-position sul gradiente. Applica background-size: 300% 300% e anima background-position per un effetto fluido.

Funziona su pulsanti e campi di input?

Sì, il CSS generato funziona su qualsiasi elemento HTML. Per i pulsanti, preferisci lo pseudo-elemento per conservare il border-radius. Per i campi di input, applica la tecnica border-image o avvolgi il campo in un contenitore a gradiente.

Cosa risolvono davvero i bordi gradiente CSS

La proprietà CSS border accetta un singolo colore solido, non un gradiente. Questa è una limitazione dell'era 1996 sopravvissuta nel CSS moderno. Per la maggior parte della storia del web, i designer che volevano un contorno gradiente attorno a una scheda o un pulsante dovevano scegliere tra usare un'immagine di sfondo (raster, non scala), avvolgere l'elemento in un contenitore colorato (funziona ma rompe il layout in modi sottili), o accettare bordi solidi. I bordi gradiente CSS sono workaround che simulano l'aspetto di border: 3px solid linear-gradient(...) tramite altre proprietà CSS, dato che quella sintassi esatta non esiste.

Due tecniche dominano. border-image (CSS Backgrounds and Borders Module Level 3, 2012) sostituisce il rendering del bordo con un gradiente o un'immagine. Funziona, ma border-image ignora completamente border-radius: gli angoli rimangono quadrati. La tecnica pseudo-elemento + background-clip usa un elemento wrapper con uno sfondo gradiente e un overlay interno che maschera tutto tranne l'area del bordo. Questo supporta gli angoli arrotondati ma richiede due strati di CSS e una gestione attenta dei box di padding e contenuto. Un terzo approccio moderno usa mask-composite (browser 2020+) per una soluzione a singolo elemento più pulita.

I bordi gradiente contano per le tendenze di design attuali. I layout basati su schede (Stripe, Linear, Vercel, Cursor) usano bordi gradiente sottili a due colori per aggiungere profondità senza pesantezza. Le evidenziazioni di feature premium spesso disegnano un bordo gradiente colorato per denotare lo status "Pro". Le estetiche cyberpunk e synthwave usano bordi gradiente neon per evocare vibrazioni retro futuro. I lanci di prodotti AI nel 2023-2024 hanno standardizzato sui bordi gradiente animati multi colore come firma visiva (OpenAI, Anthropic, Perplexity). Ciò che richiedeva editor di immagini ora si spedisce come 5 a 10 righe di CSS.

Come funziona questo strumento sotto il cofano

L'anteprima è un singolo div con le due tecniche applicate tramite CSS inline, commutabili dalla tua scelta di metodo. Per border-image, lo strumento imposta border: Npx solid transparent con border-image: linear-gradient(...) 1; il valore di slice 1 dice al browser di usare il gradiente a piena dimensione per ogni bordo. Per la tecnica pseudo-elemento, lo strumento applica uno sfondo gradiente all'elemento esterno e usa ::before (o background-clip: padding-box) per mascherare l'area di contenuto interno, lasciando visibile solo l'anello del bordo.

I color stop sono memorizzati come array JavaScript di coppie {color, position}. Quando scegli i colori o muovi lo slider dell'angolo, lo strumento ricostruisce la stringa linear-gradient() unendo gli stop con virgole e anteponendo l'angolo: linear-gradient(45deg, #ff0080 0%, #7928ca 100%). Quella stringa viene interpolata sia nel CSS di anteprima sia nel riquadro di codice. Lo slider dell'angolo usa un range da 0 a 360 gradi con rotazione visiva della freccia SVG per il feedback di orientamento.

Nulla lascia il tuo browser. La generazione della stringa gradiente, la memorizzazione del colore, il rendering dell'anteprima e la copia degli appunti avvengono tutti in JavaScript sul tuo dispositivo. Nessuna richiesta di rete viene fatta; nessuna analytics traccia quali colori scegli. Lo strumento non ha alcun backend oltre l'HTML statico e il JavaScript serviti una volta al primo caricamento. Aggiorna la pagina e i tuoi colori e angolo selezionati sono andati a meno che tu non abbia prima copiato il CSS.

Breve storia dei bordi e gradienti CSS

• Bordi CSS 1, 1996.La prima specifica CSS (CSS 1, dicembre 1996) definisce border-style, border-width e border-color, supportando solo colori solidi e gli otto stili di bordo (none, dotted, dashed, solid, double, groove, ridge, inset, outset). Nessun supporto gradiente, una scelta architetturale che persiste per 16 anni.
• Linear-gradient CSS arriva, dal 2008 al 2011.WebKit introduce -webkit-gradient() nel 2008, seguito dal linear-gradient() standardizzato in CSS Image Values and Replaced Content Module Level 3 (2011). I gradienti diventano cittadini CSS di prima classe per gli sfondi, ma non per i bordi. I designer vogliono immediatamente bordi gradiente; la specifica non lo accomoda.
• border-image arriva, 2012.CSS Backgrounds and Borders Module Level 3 (CR giugno 2012) definisce border-image con pieno supporto browser entro il 2014. Permette ai bordi di usare qualsiasi immagine, inclusi i gradienti CSS. Il problema: border-image sovrascrive border-radius, quindi i bordi gradiente arrotondati rimangono impossibili solo con questa tecnica.
• Pattern di workaround pseudo-elemento emerge, dal 2013 al 2015.CSS-Tricks e risorse simili pubblicano workaround usando pseudo-elementi ::before con sfondi gradiente e trucchi background-clip: padding-box. Il "bordo gradiente arrotondato" diventa risolvibile ma richiede di comprendere le intricacies del box model. Entro il 2015, il pattern è diffuso nella documentazione dei design system.
• Conic-gradient atterra, dal 2018 al 2021.CSS conic-gradient() (Chrome 69, settembre 2018; Firefox 83, novembre 2020; Safari 12.1, marzo 2019) abilita gradienti a sweep circolare, ideali per effetti "anello di caricamento" con bordi gradiente. Combinati con l'animazione, i bordi conic-gradient creano i pattern di bagliore rotante popolari nei lanci di prodotti AI nel 2023.
• Mask-composite sblocca soluzioni più pulite, dal 2020 al 2024.CSS Masking Module Level 1 (2014) e il supporto mask-composite nei browser moderni (2020+) permette bordi gradiente a singolo elemento senza pseudo-elementi: stratifica uno sfondo gradiente e maschera tutto tranne l'anello esterno tramite operazioni composite. Entro il 2024 questo è l'approccio di produzione più pulito, anche se i workaround con pseudo-elemento rimangono compatibili con browser più vecchi.

Flussi nel mondo reale

• Accenti sottili per componenti scheda.Le schede dashboard moderne (pensa a Stripe, Linear, Vercel) usano bordi gradiente da 1 a 2 pixel in schemi colore a due o tre tonalità per aggiungere interesse visivo senza pesantezza. Il gradiente è solitamente sottile: dal 10% al 20% di opacità, basso contrasto, per lo più scala di grigi con un accenno di colore del marchio. Questo è sufficiente per differenziare le schede da uno sfondo piatto e segnalare interattività.
• Evidenziazioni di feature premium.Le tabelle prezzi SaaS usano bordi gradiente vivaci (spesso oro a viola o arcobaleno) sul piano "Pro" o "Consigliato" per elevarlo visivamente. Il pattern funziona perché attira l'occhio attraverso colore e movimento (se animato) senza richiedere etichette badge. Linear, Notion, Figma e la maggior parte delle pagine prezzi SaaS moderne usano questo esatto pattern.
• Effetti neon e bagliore.Le estetiche cyberpunk, synthwave e UI di gaming combinano bordi gradiente con box-shadow per un look da tubo neon. Il bordo fornisce la transizione di colore, l'ombra fornisce il bloom. Pattern comune: border-image: linear-gradient(45deg, #ff0080, #00d4ff) 1 più box-shadow: 0 0 20px rgba(255,0,128,0.5) sullo stesso elemento.
• Identità visiva di prodotto AI.L'onda 2023-2024 di strumenti AI (OpenAI ChatGPT, Anthropic Claude, Perplexity, Cursor) ha convertito sui bordi gradiente animati multi colore come firma visiva per "l'AI sta pensando" o campi di input in attesa di elaborazione AI. Solitamente gradienti conic rotanti o gradienti lineari che si spostano su un loop di 4 a 6 secondi. Diventa abbreviazione di "intelligente / generativo" nella UX moderna.
• Rifinitura stati hover e focus.Pulsanti e input che passano da bordo solido in stato a riposo a bordo gradiente al passaggio del mouse o focus sembrano premium e intenzionali. La transizione tra colori può animarsi con transizioni CSS su background-position se il gradiente si estende oltre l'area visibile (background-size: 200% 100% con un'animazione di scorrimento).
• Espressione del colore del marchio.I sistemi del marchio con loghi multi colore (Instagram, Slack, Discord) usano spesso bordi gradiente per estendere la loro identità nei componenti UI. Una scheda con il gradiente del marchio come bordo stabilisce continuità visiva con il logo. Per le pagine di marketing SaaS, questo è uno dei modi più economici per far sembrare "brandizzato" un componente generico.

Insidie comuni e cosa significano

• border-image ignora border-radius.La confusione più comune: usare border-image: linear-gradient(...) insieme a border-radius produce angoli quadrati. border-image prende il sopravvento sul rendering del bordo completamente e la proprietà radius non ha effetto sul risultato dipinto. Per ottenere bordi gradiente arrotondati, usa la tecnica pseudo-elemento o l'approccio moderno mask-composite, non border-image.
• La tecnica pseudo-elemento richiede padding-box.Il workaround standard usa background sull'elemento esterno e un overlay interno tramite ::before. Dettaglio critico: l'overlay interno necessita di background-clip: padding-box così si ferma al bordo del padding, lasciando visibile l'area del bordo. Saltare questa proprietà di clip risulta nel gradiente completamente coperto dall'overlay, nessun bordo visibile.
• Animare i bordi gradiente è costoso per la GPU.I bordi gradiente animati (il pattern "AI shimmer") funzionano transitando background-position su un gradiente grande. Mentre le GPU moderne gestiscono bene questo, applicarlo a molti elementi simultaneamente (per esempio, ogni scheda su una pagina) abbassa i frame rate notevolmente sui dispositivi di bassa fascia. Usa i bordi gradiente animati con parsimonia: uno o due elementi "hero" per pagina, non a livello di sito.
• Conflitto colore in modalità scura.Un bordo gradiente progettato per uno sfondo chiaro spesso sembra sbagliato su sfondi scuri. I gradienti bianco puro diventano invisibili; i colori vivaci sembrano sovrasaturi. Per design a doppio tema, definisci color stop gradiente separati per modalità chiara e scura tramite proprietà personalizzate CSS o media query. Riduci la saturazione e regola la tonalità per mantenere l'armonia visiva con il tema circostante.
• I bordi a basso contrasto falliscono l'accessibilità.I bordi gradiente sottili che sembrano eleganti possono fallire WCAG 2.1 SC 1.4.11 Contrasto Non Testuale (3:1 minimo) per i componenti UI che trasmettono stato. Se il bordo gradiente è l'unico indicatore visivo dei limiti di un pulsante o della selezionabilità di una scheda, assicura contrasto adeguato con lo sfondo. Per bordi puramente decorativi su elementi già visibili, il contrasto è meno critico ma vale ancora la pena controllarlo.
• Internet Explorer ed Edge vecchio non supportano nulla di utile.IE 11 (ritirato giugno 2022) e Edge pre-Chromium (dal 2015 al 2019) mancano di border-image affidabile per i gradienti, mask-composite e diverse tecniche pseudo-elemento. Per questi browser legacy, fallback graziosamente a un bordo solido usando il colore centrale del gradiente. I browser moderni coprono il 99%+ degli utenti nel 2026, ma i fallback legacy rimangono importanti per il software aziendale.

Privacy: tutto gira nel tuo browser

Gli strumenti generatori CSS arrivano in due sapori: semplici pagine HTML che girano JavaScript lato client (private, veloci) ed editor cloud che salvano i tuoi progetti (collaborativi ma con compromessi sulla privacy). Questo strumento è il primo tipo. I tuoi colori selezionati, il tuo angolo, il tuo CSS generato: tutto rimane nella tua sessione del browser. Aggiorna la pagina e lo stato è andato a meno che tu non abbia prima copiato il CSS. Nessun server memorizza le tue scelte gradiente, nessuna analytics traccia quali combinazioni di colori hai provato e nessun account è necessario.

La proprietà di privacy conta soprattutto per il lavoro di design proprietario. Uno studio che fa prototipi di combinazioni gradiente per un riprogettazione di marca confidenziale, uno sviluppatore che lavora su accenti UI di un prodotto non annunciato, o un designer che itera su una palette di campagna: qualsiasi contesto in cui la scelta del colore o la cronologia di iterazione potrebbe far trapelare informazioni sul lavoro. Con questo strumento, non c'è nulla catturato perché nulla viene inviato. Apri la scheda di rete del browser e vedrai zero richieste in uscita durante l'uso; solo il caricamento iniziale della pagina recupera l'HTML e il JavaScript.

Quando un altro strumento è la scelta giusta

• SVG per forme di bordo complesse.Per bordi gradiente non rettangolari (arrotondati con tacche, bordi smerlati, forme irregolari personalizzate), SVG con linearGradient o radialGradient applicato a un attributo stroke fornisce pieno controllo. I bordi gradiente CSS funzionano per rettangoli e rettangoli arrotondati; SVG gestisce tutto il resto. Usa i due insieme: SVG per contorni di forma decorativi, CSS per componenti UI standard.
• Photoshop per immagini gradiente statiche.Se il bordo gradiente è su un'immagine hero statica o banner che non cambierà, progettarlo in Photoshop, Figma o Sketch ed esportare come PNG o WebP può essere più semplice che mantenere il CSS. L'immagine scala come parte della pipeline di asset della pagina. I bordi gradiente CSS sono per elementi dinamici (schede, pulsanti, componenti) che devono renderizzarsi a qualsiasi dimensione.
• Librerie di componenti per coerenza del design system.Tailwind UI, shadcn/ui, Radix e altre librerie di componenti spediscono componenti scheda e pulsante pre stilizzati con varianti di bordo gradiente opzionali. Per progetti che già usano queste librerie, applicare la variante della libreria è più veloce che fare CSS a mano. I bordi gradiente fatti a mano sono utili per design one off o progetti non ancora impegnati con una libreria di componenti.
• Canvas o WebGL per effetti animati multi strato.Per effetti gradiente altamente animati e multi strato (sistemi di particelle, simulazioni di fluidi, arte generativa), Canvas 2D o WebGL fornisce controllo per pixel che il CSS non può eguagliare. Il compromesso è la complessità di implementazione e l'accessibilità (il contenuto canvas è invisibile ai lettori di schermo). Per bordi gradiente decorativi su componenti UI standard, CSS è la scelta giusta; per effetti visivi, considera approcci basati su canvas.

Altre domande frequenti

Posso usare più di due colori in un bordo gradiente?

Sì. CSS linear-gradient() accetta color stop illimitati: linear-gradient(45deg, #ff0080 0%, #ffa500 50%, #00d4ff 100%) crea un gradiente a tre colori che transita attraverso l'arancione nel mezzo. Aggiungi tutti gli stop che vuoi, ciascuno con una posizione opzionale. Per gradienti complessi multi colore (effetto arcobaleno), distribuisci gli stop uniformemente: 0%, 16,7%, 33,3%, 50%, 66,7%, 83,3%, 100%.

Come creo un bordo gradiente arcobaleno o conic?

Per gradienti conic (sweep), usa conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red) come sfondo dell'elemento esterno con la tecnica di mascheramento padding-box pseudo-elemento. Per un effetto rotante (popolare negli stati di caricamento dei prodotti AI), anima --angle tramite CSS Houdini o usa @property --angle con un'animazione di rotazione di 360 gradi. Il risultato è uno sweep di colore fluido attorno al bordo.

Posso usare proprietà personalizzate CSS per bordi gradiente consapevoli del tema?

Sì, ed è l'approccio raccomandato per i design system. Definisci i colori del gradiente come proprietà personalizzate CSS (--gradient-start, --gradient-end) e usali nella tua dichiarazione gradiente: linear-gradient(var(--angle), var(--gradient-start), var(--gradient-end)). Sovrascrivi le variabili nelle media query in modalità scura o classi tema. Un file CSS gestisce entrambi i temi chiaro e scuro tramite ridefinizione delle variabili.

Funziona in browser vecchi come Internet Explorer?

Internet Explorer 11 (ufficialmente ritirato da Microsoft nel giugno 2022) aveva supporto border-image parziale ma rendering gradiente inaffidabile, e nessun mask-composite. I browser moderni (Chrome 88+, Firefox 78+, Safari 14+) supportano completamente entrambe le tecniche. Se devi supportare IE, fornisci un fallback a colore solido usando il colore centrale del gradiente: dichiara border: 3px solid #888; prima della regola gradiente, e IE userà quella mentre i browser moderni applicheranno il gradiente.

C'è un modo a singola proprietà per fare bordi gradiente?

Non ancora nel CSS standardizzato. Le proposte moderne (bozza CSS Backgrounds and Borders Module Level 4) includono la proprietà border-color che accetta direttamente gradienti, ma le implementazioni browser non sono ancora stabili. L'approssimazione attuale più vicina è la tecnica mask-composite che usa un singolo elemento ma richiede ancora tre dichiarazioni CSS. Si spera che entro il 2027 o 2028, border: 3px solid linear-gradient(...) funzionerà semplicemente.

Perché il mio bordo gradiente sembra diverso in Safari?

Safari storicamente è in ritardo rispetto a Chrome e Firefox nella parità di feature CSS, specialmente per i valori mask-composite e alcuni casi limite di background-clip. Testa esplicitamente in Safari. Se la tecnica pseudo-elemento fallisce in Safari, passa a border-image (che funziona universalmente ma perde border-radius), o usa prefissi specifici Safari: -webkit-mask-composite può essere richiesto per versioni Safari più vecchie. iOS Safari spesso necessita del prefisso anche nelle versioni 2024.