Generatore di gradienti CSS
Crea uno sfondo lineare o radiale, regola i colori e copia il CSS. Sfondo e dimensioni dell'anteprima non sono inclusi nel codice.
Crea un gradiente
- Scegli Lineare e un angolo, oppure Radiale con forma, estensione e centro.
- Modifica colore, opacità e posizione di ogni punto. Mantieni l'ordine; posizioni uguali creano un confine netto. Aggiungi o duplica un punto.
- Controlla anteprima e CSS, poi copia la dichiarazione o scarica gradient.css. Cambia lo sfondo dell'anteprima per osservare la trasparenza.
Capire i controlli
L'angolo lineare 0° punta in alto e 90° a destra. L'aspetto può cambiare tra un riquadro largo e uno quadrato.
Un gradiente radiale si espande dal centro. Forma ed estensione determinano la posizione del 100%.
L'opacità è separata dal colore RGB. Il codice conserva la percentuale esatta e seleziona esplicitamente sRGB; lo sfondo dell'anteprima non è esportato.
Usa punto o virgola e al massimo un decimale. Le posizioni devono essere ordinate. Questo editor usa 2–8 punti, non tutte le funzioni CSS.
Esempi
Per uno sfondo da sinistra a destra, scegli Lineare a 90°, rosso allo 0% e blu al 100%.
Per un confine netto, usa colori diversi nella stessa posizione. L'ordine delle righe determina il passaggio.
Per uno sfondo radiale sfumato, scegli un cerchio e opacità 0% per il colore esterno; controlla su sfondi chiari e scuri, che non vengono esportati.
Limiti dell'anteprima
Il generatore crea un gradiente lineare o radiale in sRGB. Non importa CSS arbitrario né crea sfondi conici, ripetuti, a maglia, con immagini o animati.
Un browser che non supporta la sintassi esplicita non mostra l'anteprima, ma consente di copiare il codice. Non viene sostituito un altro gradiente.
Dimensioni, sfondo, browser e schermo influenzano l'aspetto. Non si garantiscono pixel identici, contrasto o calibrazione di stampa.
Alcuni centri radiali e le estensioni vicine producono risultati degeneri. Input attivi non validi eliminano il risultato corrente.
Il gradiente resta nella pagina
Modifica e generazione avvengono nella pagina senza caricare i valori. Le bozze non vengono salvate. Copia e download avvengono solo su richiesta; si applica comunque l'informativa generale del sito.
Domande sui gradienti CSS
Fonti e metodo
Le specifiche CSS descrivono geometria dei gradienti, interpolazione dei colori e serializzazione.
- W3Cw3.orgCSS Images 3Angoli, punti e geometria radiale.
- W3Cw3.orgCSS Images 4Sintassi dei gradienti e metodi di interpolazione.
- W3Cw3.orgCSS Color 4Interpolazione dei colori e alfa premoltiplicato.
- W3Cw3.orgCSSOMSerializzazione dei valori CSS.
Un decimale è una scelta dell'editor. Questi documenti non certificano supporto o precisione del browser.
Strumenti correlati
Da SVG a PNG
Converti un file SVG locale o il codice incollato in PNG, con dimensioni definite, trasparenza e caratteri inclusi.
Apri strumento — Da SVG a PNGGeneratore di filtri CSS
Ordina e ripeti gli effetti CSS, confronta un campione e copia la dichiarazione esatta.
Apri strumento — Generatore di filtri CSSCalcolatore della dimensione fluida del testo
Definisci la dimensione del testo per due larghezze del viewport. Copia il CSS relativo alla radice e osserva il modello calcolato con gli stessi coefficienti esportati.
Apri strumento — Calcolatore della dimensione fluida del testoGeneratore di pulsanti CSS
Personalizza gli stati di un pulsante nativo, verifica il focus e copia HTML e CSS.
Apri strumento — Generatore di pulsanti CSSGeneratore CSS border-radius
Modifica otto raggi, visualizza il riquadro e copia il CSS in pixel o percentuale.
Apri strumento — Generatore CSS border-radiusGeneratore CSS Grid
Crea un esempio CSS Grid con tracce, posizioni e aree con nome. Visualizza l’anteprima, copia CSS o HTML e scarica l’esempio completo.
Apri strumento — Generatore CSS GridGeneratore CSS Flexbox
Crea un esempio Flexbox con controlli di contenitori ed elementi, assi di layout espliciti, CSS e HTML corrispondenti e download locale di un esempio completo.
Apri strumento — Generatore CSS FlexboxGeneratore CSS di ombre del testo
Crea ombre del testo ordinate, visualizza testo semplice e copia il CSS esatto.
Apri strumento — Generatore CSS di ombre del testoGeneratore di trasformazioni CSS
Componi trasformazioni 2D CSS ripetibili, modifica px o la traslazione e l'origine percentuale, ispeziona una casella di riferimento e copia le esatte dichiarazioni attuali.
Apri strumento — Generatore di trasformazioni CSSGeneratore di ombre CSS
Crea livelli box-shadow ordinati, visualizza l’anteprima e copia il codice CSS.
Apri strumento — Generatore di ombre CSSFiligrana per immagini
Aggiungi testo o un logo alle immagini, controlla i risultati e scarica i singoli file o uno ZIP.
Apri strumento — Filigrana per immaginiConvertitore colori
Converti valori sRGB HEX, RGB e HSL supportati con alfa e precisione esplicita.
Apri strumento — Convertitore coloriImmagine in testo (OCR)
Riconosci testo stampato in PNG o JPEG locali, scegli la lingua e controlla o correggi il risultato prima di copiarlo o scaricarlo.
Apri strumento — Immagine in testo (OCR)Lettore di codici QR da immagine
Leggi un codice QR da un PNG o JPEG locale ed esamina testo o byte senza aprire link.
Apri strumento — Lettore di codici QR da immagineVerifica contrasto colori
Confronta i colori di primo piano e sfondo, regola l’opacità e verifica le soglie numeriche WCAG per testo e dettagli essenziali dell’interfaccia.
Apri strumento — Verifica contrasto coloriCalcolatore dimensioni di stampa e risoluzione
Calcola le dimensioni di stampa, i pixel necessari e i PPI effettivi con bordi o ritaglio.
Apri strumento — Calcolatore dimensioni di stampa e risoluzioneCalcolatore del rapporto d’aspetto
Trova il rapporto tra larghezza e altezza o nuove dimensioni in pixel impostando un solo lato.
Apri strumento — Calcolatore del rapporto d’aspettoCompressore immagini
Prova ad adattare un JPEG, PNG o WebP a una dimensione file desiderata, con risultati misurati e dimensioni riducibili.
Apri strumento — Compressore immaginiHEIC in JPG
Converti localmente le foto HEIC supportate in JPG a piena risoluzione, scegli qualità e sfondo e scarica i risultati verificati singolarmente o in ZIP.
Apri strumento — HEIC in JPGConvertitore di immagini
Converti immagini PNG, JPEG e WebP in locale, imposta trasparenza, sfondo e qualità e scarica i risultati.
Apri strumento — Convertitore di immaginiCrea collage di foto
Disponi le foto locali in una griglia e scarica un PNG o JPEG.
Apri strumento — Crea collage di fotoRuotare e riflettere immagini
Ruota o rifletti un gruppo locale di immagini statiche PNG, JPEG e WebP, poi controlla e scarica i risultati elaborati.
Apri strumento — Ruotare e riflettere immaginiRitagliare immagini
Ritaglia un JPEG, PNG o WebP locale con precisione in pixel e scarica il risultato in PNG o JPEG.
Apri strumento — Ritagliare immaginiRidimensionare immagini
Ridimensiona JPG, PNG o WebP in pixel o percentuale, controlla l’anteprima e scarica il risultato.
Apri strumento — Ridimensionare immagini