Generatori CSS gratuiti
Generatori visivi di codice CSS con anteprima in tempo reale. Modifica le impostazioni e copia CSS pronto per la produzione all'istante.
Tutti i generatori CSS
Generatore gradiente CSS
Crea bellissimi gradienti CSS lineari e radiali visivamente.
Generatore CSS Box Shadow
Crea bellissime ombre di riquadri visivamente e copia il CSS.
Generatore CSS Text Shadow
Crea effetti text-shadow visivamente e copia il CSS.
Generatore CSS Border Radius
Crea visivamente angoli arrotondati e copia il CSS.
Generatore di percorsi a clip CSS
Scegli un preset di forma, regola i cursori e copia il codice clip-path CSS.
Generatore di glassmorfismo CSS
Crea effetti UI in vetro smerigliato alla moda con anteprima dal vivo. Personalizza e copia il codice CSS.
Generatore di Bezier cubici CSS
Trascina i punti di controllo per creare funzioni di easing CSS personalizzate. Visualizza l'anteprima dell'animazione e copia il codice.
Generatore di triangoli CSS
Crea triangoli CSS puri utilizzando il trucco dei bordi. Scegli direzione, dimensione e colore.
Generatore di CSS / Spinner
Scegli un'animazione di caricamento, personalizza i colori e la velocità, e copia il codice CSS puro.
Generatore di modelli CSS
Genera pattern di sfondo CSS ripetuti utilizzando pure gradienti CSS. Scegli un pattern, personalizza e copia.
Convertitore gratuito da PX a REM
Converti i pixel in rem e torna con una dimensione del carattere base configurabile.
Minificatore CSS
Comprimi il codice CSS rimuovendo commenti, spazi bianchi e ottimizzando i valori.
Generatore di animazioni CSS
Crea animazioni CSS @keyframes visivamente · scegli un preset o personalizza i tempi, le trasformazioni e l'easing.
Visualizzatore del modello a riquadro CSS
Regola i margini, i bordi, il riempimento e le dimensioni del contenuto e visualizza il modello di riquadro CSS dal vivo.
Generatore di colonne multiple CSS
Crea layout di testo a più colonne nello stile di giornali con anteprima dal vivo. Regola le colonne, lo spazio, lo stile e la larghezza della regola.
Generatore di filtri CSS
Regola le proprietà del filtro CSS con i cursori e visualizza il risultato in tempo reale. Copia il codice generato.
Generatore di tratti di testo CSS
Crea effetti di testo con contorno e tratto con anteprima dal vivo e codice CSS pronto da copiare.
Generatore di bordi sfumati CSS
Crea bellissimi bordi sfumati utilizzando la proprietà border-image. Regola i colori, la larghezza, il raggio e l'angolo, quindi copia il CSS.
Generatore di CSS Flexbox
Costruisci layout flexbox visivamente · regola le proprietà del contenitore e dell'elemento, visualizza in anteprima dal vivo, copia il CSS.
Generatore di sfumature di testo CSS
Crea bellissimi effetti di testo sfumato. Regola i colori, l'angolo e visualizza il testo in anteprima, quindi copia il CSS.
Generatore di griglie CSS
Costruisci layout CSS Grid visivamente · imposta colonne, righe, gap e allineamento, visualizza in anteprima dal vivo, copia il CSS.
Convertitore di unità di misura CSS
Converti tra px, rem, em, vw, vh, pt, cm, mm, in e % con contesto configurabile.
Informazioni sui nostri generatori CSS
Absolutool include 12 generatori CSS visivi con anteprima in tempo reale e codice pronto da copiare. Ogni generatore ti permette di regolare i valori con cursori, manopole o controlli, e di vedere il risultato all'istante · senza alcuna conoscenza di CSS. Quando il rendering ti soddisfa, copia il codice con un clic.
I nostri strumenti CSS coprono le proprietà più ricercate: gradient (lineari e radiali), box shadow e text shadow, border radius, clip path (poligono, cerchio, ellisse), glassmorphism, curve di Bézier cubiche per le animazioni, triangoli in puro CSS, spinner di caricamento, pattern di sfondo e conversione di unità. Perfetti sia per i principianti che imparano il CSS sia per gli sviluppatori esperti che vogliono affinare visivamente i propri stili.
Perché i generatori visivi CSS sono importanti
Scrivere CSS a mano per proprietà come linear-gradient(135deg, #667eea 0%, #764ba2 100%), box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) o clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) richiede di conoscere la sintassi a memoria e di immaginare il risultato visivo prima di poterlo vedere. I generatori visivi invertono quell'ordine: trascina un cursore, scegli un colore, guarda l'anteprima aggiornarsi e poi copia il codice generato. Gli strumenti di questa categoria producono CSS conforme agli standard che funziona in ogni browser uscito negli ultimi cinque anni, senza sintassi proprietaria, senza preprocessore richiesto.
Ogni generatore di questo sito è una singola pagina HTML con un pannello di anteprima dal vivo e una serie di controlli. Mentre regoli i valori, l'anteprima viene resa di nuovo in tempo reale usando il CSS reale che il generatore copierà. Non c'è un motore di rendering proprietario che finge di essere CSS; ciò che vedi è esattamente ciò che vedranno i tuoi utenti. Il codice generato usa sintassi moderna (proprietà personalizzate CSS dove ha senso, proprietà logiche per il supporto RTL, OKLCH per gli strumenti di colore più recenti) ma ripiega con eleganza su alternative quando ti serve il supporto a browser più vecchi: puoi ridurre una singola impostazione per strumento per passare a una variante adatta al vecchio.
Compatibilità dei browser e prefissi dei fornitori
Le specifiche CSS sono notevolmente stabili dal 2018: gradienti, trasformazioni, ombre, animazioni, flexbox, grid e clip-path funzionano tutti senza prefissi in ogni browser principale (Chrome, Firefox, Safari, Edge). Il pugno di proprietà che richiedono ancora prefissi sono per lo più sperimentali (la sottogriglia CSS nei Safari più vecchi, le animazioni guidate dallo scorrimento). I generatori emettono per impostazione predefinita CSS standard senza prefissi che puoi incollare direttamente in un foglio di stile. Il backdrop-filter (usato nel generatore di glassmorfismo) è stato l'ultimo ritardatario comune, ma è arrivato nella versione stabile di Firefox 103 (luglio 2022) e Safari lo supporta tramite -webkit-backdrop-filter da anni. I progetti moderni hanno raramente bisogno di autoprefixer per le proprietà che questi strumenti coprono.
Se punti a Internet Explorer 11 (un pubblico in via di sparizione ma reale per alcune intranet aziendali), la maggior parte delle proprietà qui non ha supporto. Il generatore di grid ripiega con eleganza su alternative perché IE11 supporta una sintassi di grid più vecchia abbastanza simile per i layout semplici, ma funzioni avanzate come subgrid o gap non verranno rese. Per i pubblici moderni la regola pratica è «usa la sintassi standard che questi strumenti producono, salta i prefissi e accetta che il piccolissimo pubblico IE rimanente veda un layout semplificato». caniuse.com resta il riferimento canonico per qualsiasi proprietà di cui non sei sicuro.
Considerazioni sulle prestazioni
Gli effetti visivi possono diventare in fretta trappole di prestazioni. Un box-shadow a più livelli si disegna una volta per fotogramma, il che è economico; un filter: blur(20px) su un'intestazione fissa forza un ridisegno a ogni evento di scorrimento e fa crollare la frequenza dei fotogrammi su mobile. Lo strumento Bézier cubica ti aiuta a regolare le curve di animazione perché risultino giuste; abbinarlo a will-change: transform sull'elemento animato tiene il browser pronto a comporre l'animazione sulla GPU invece di ridisegnare la pagina. La regola generale: anima transform e opacity; tutto il resto (larghezza, altezza, top, left, colore) innesca layout o disegno e dovrebbe essere usato con parsimonia nelle animazioni.
Il generatore di glassmorfismo è il più pesante degli effetti visivi qui perché backdrop-filter: blur(20px) obbliga il browser a catturare lo sfondo, sfocarlo e ricomporre a ogni fotogramma in cui l'elemento di vetro è visibile. Su un computer con grafica dedicata questo è invisibile; su un telefono di fascia media può abbassare la frequenza dei fotogrammi da 60 a 30 al secondo. Il generatore di motivi CSS produce motivi basati su SVG il cui costo è trascurabile. I caricatori e le animazioni restano fluidi finché animano transform/opacity. Se il tuo design impila tre o più livelli di sfocatura, provalo su un telefono di fascia media prima di pubblicare; la differenza tra «elegante» e «a scatti» può essere un singolo livello in più.
Il CSS nei sistemi di design
I sistemi di design moderni esprimono colori, spaziature ed elevazioni come proprietà personalizzate (variabili CSS) e poi costruiscono sopra gli stili dei componenti. I generatori qui producono valori diretti che puoi incollare così come sono in un componente, ma sono altrettanto utili per raccogliere token di sistema: copia tre o quattro box-shadow di profondità crescente nei tuoi token --shadow-sm, --shadow-md, --shadow-lg; copia due gradienti in --bg-primary e --bg-secondary; copia una sequenza di valori di border-radius in --radius-sm e affini. Il generatore ti aiuta a prendere queste decisioni in modo visivo invece di indovinare i numeri e ricaricare la pagina.
Il generatore di CSS Grid emette grid-template-columns e grid-template-rows con linee con nome, che è ciò che vuoi per un sistema. Il generatore di Flexbox fa lo stesso per i layout flex. Entrambi producono codice che puoi avvolgere così com'è in una classe o in un componente Tailwind. Per i progetti che usano Tailwind, i valori spesso si traducono direttamente: uno spazio di 1rem diventa gap-4, un raggio di bordo di 0.5rem diventa rounded-md. Per i progetti senza Tailwind, le variabili CSS grezze sono di solito esattamente ciò che vorresti nel file del sistema di design. Il passo della selezione visiva è la parte che non puoi automatizzare facilmente.
Domande frequenti
Questi generatori CSS funzionano sui browser più vecchi?
La sintassi standard che emettono è supportata da ogni browser uscito dal 2019, cosa che copre più del 97% degli utenti mondiali secondo i dati di StatCounter e caniuse. Per Internet Explorer 11 (circa lo 0,5% del traffico mondiale, per lo più utenti di intranet aziendali) la maggior parte delle funzioni non verrà resa. Il Safari moderno supporta backdrop-filter tramite il prefisso -webkit-, che lo strumento di glassmorfismo emette accanto alla proprietà standard.
Perché il mio gradiente appare a bande?
Il colore a 8 bit (256 livelli per canale) non può rappresentare la fusione morbida tra due colori vicini su una lunga distanza: vedrai «bande» visibili su uno schermo calibrato. Soluzioni: allunga di meno il gradiente, aggiungi un terzo stop di colore per spezzare la banda, applica il dithering al gradiente con un filtro di rumore SVG, o usa l'interpolazione del gradiente OKLCH (supportata in Chrome e Safari) che interpola in uno spazio percettivamente uniforme.
Dovrei usare i keyframe CSS o le transizioni?
Le transizioni servono per passare da uno stato a un altro (al passaggio del mouse, al clic, al focus); sono dichiarative e il browser fa il resto. I keyframe servono per animazioni con più passi o una sequenza definita (un indicatore di caricamento, una serie di apparizioni scaglionate). Per un semplice cambio di stato usa le transizioni; per qualsiasi cosa a più passi usa i keyframe. I generatori Bézier cubica e di animazione di questo sito coprono entrambi i casi.
Come faccio a rendere bello un effetto di glassmorfismo?
Tre impostazioni contano di più: uno sfondo semitrasparente (da rgba(255,255,255,0.1) a 0.3), un vero backdrop-filter: blur() nell'intervallo di 10-30px, e un bordo di 1px a 1,5 volte l'alfa dello sfondo per dare un bordo al vetro. Senza tutti e tre, risulta piatto. Il generatore di glassmorfismo di questo sito regola tutti e tre insieme e include l'alternativa di Safari -webkit-backdrop-filter.
Qual è la differenza tra rem, em e px?
Il px è una dimensione assoluta: 1px è un pixel CSS, che il browser scala a pixel fisici in base al rapporto di pixel del dispositivo. L'em è relativo alla dimensione del carattere dell'elemento genitore, quindi 1.5em su un figlio di un elemento con carattere da 16px è 24px. Il rem è relativo alla dimensione del carattere dell'elemento radice html, per impostazione predefinita 16px, ma modificabile tramite la dimensione del carattere radice per l'accessibilità. Usa rem per le dimensioni che devono rispettare lo zoom e le preferenze di dimensione del carattere del browser dell'utente, e px per le dimensioni che devono essere invariabili (bordi da 1px, dimensioni di icone fisse).
Mi serve un preprocessore CSS per usare questi strumenti?
No. Ogni generatore emette CSS standard che funziona direttamente in un file .css. I preprocessori (Sass, Less, Stylus) sono utili quando vuoi variabili, annidamento, mixin o calcolo in fase di compilazione, ma il CSS moderno ora supporta nativamente le proprietà personalizzate (variabili), l'annidamento e molte altre funzioni che un tempo richiedevano un preprocessore. L'output di questi strumenti è indipendente dal preprocessore: incollalo in un file Sass o in un file CSS semplice allo stesso modo.