Preview
CSS generato
Controlli della sfumatura
Preset popolari
Esempi di gradiente
Esplora questi splendidi esempi di gradiente e lasciati ispirare per il tuo prossimo progetto. Fare clic su qualsiasi gradiente per caricarlo nel generatore.
Tramonto Blush
Una sfumatura calda ispirata a splendidi tramonti.
Brezza oceanica
Una pendenza calma che evoca la sensazione delle acque costiere.
Fusione alla menta
Una sfumatura fresca e moderna che combina menta e azzurro cielo.
Giardino lussureggiante
Una sfumatura vibrante che rappresenta la bellezza della natura.
Sogno cosmico
Una sfumatura magica ispirata al cielo notturno.
L'ora d'oro
Una sfumatura calda che cattura l'essenza del crepuscolo.
Documentazione del gradiente
Cosa sono i gradienti CSS?
I gradienti CSS consentono di visualizzare transizioni uniformi tra due o più colori. Possono essere utilizzati come sfondi per elementi e sono disponibili in tre diversi tipi:
- Gradienti lineari:Colori di transizione lungo una linea retta.
- Gradienti radiali:Colori di transizione da un punto centrale verso l'esterno.
- Gradienti conici:Colori di transizione attorno a un punto centrale in un cerchio.
Come utilizzare le sfumature
Una volta generato un gradiente utilizzando il nostro strumento, puoi utilizzare il codice CSS nei tuoi progetti:
- Copia il codice CSS dal generatore.
- Incollalo nel tuo file CSS o usalo in linea nei tuoi elementi HTML.
- Applica la sfumatura a qualsiasi elemento utilizzando il pulsante
backgroundproperty.
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
- Usate più di due colori per ottenere un effetto di sfumatura più complesso.
- Regola le posizioni dei colori per controllare dove si verificano le transizioni.
- Combina più sfumature per ottenere effetti ancora più creativi.
- Per le sfumature coniche, la modifica del centro crea motivi interessanti.
- Salva i tuoi gradienti preferiti per un uso successivo.
Supporto del browser
I gradienti CSS sono ampiamente supportati nei browser moderni. Tuttavia, i browser meno recenti come Internet Explorer potrebbero non renderli correttamente. Fornisci sempre un colore di riserva:
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
Chrome
26+
Firefox
16+
Safari
6.1+
Edge
12+
Informazioni su questo strumento
Il nostro generatore di gradienti CSS è progettato per aiutare sviluppatori e designer a creare bellissimi gradienti senza sforzo. Che tu stia lavorando su un sito Web, un'applicazione o desideri semplicemente sperimentare con i colori, questo strumento semplifica la generazione del gradiente perfetto per il tuo progetto.
Features
Facile da usare
Interfaccia intuitiva per la creazione di gradienti.
Design reattivo
Funziona perfettamente su schermi di tutte le dimensioni.
Copia-Incolla pronto
Ottieni immediatamente un codice CSS pulito.
Preset disponibili
Inizia con bellissimi gradienti predefiniti.
Related Tools
Meno in CSS Converter
Trasforma il tuo codice Less in CSS. Veloce, facile e sicuro.
Minimizzatore CSS
Comprimi e ottimizza il tuo codice CSS con precisione professionale
Generatore di transizioni CSS3
Transizione di opacità uniforme
JSON Editor
Modifica Big JSON con facilità: velocissimo e fluido
Da Pantone a RGB
Converti i colori Pantone in valori RGB per la progettazione digitale
Abbellitore JavaScript
Formatta e abbellisci il tuo codice JavaScript con precisione professionale