Generatore di gradienti CSS
Colori da una parte, una dichiarazione dall’altra.
Gli esempi sostituiscono temporaneamente i dati e le impostazioni. Puoi ripristinare il lavoro precedente.
0 caratteri
Risultato
Incolla o scrivi qui sopra per vedere il risultato.
I tuoi file restano sul tuo dispositivo
Questo strumento viene eseguito interamente nel tuo browser. Ciò che incolli viene elaborato sul tuo dispositivo e non viene mai inviato a un server, quindi puoi usarlo in sicurezza con token, chiavi e testi non pubblicati.
Esempio
Esempio pratico — Generatore di gradienti CSS
Inserisci le righe in ordine e usa le impostazioni seguenti. Confronta il risultato con le righe di uscita.
| Voce | Valore |
|---|---|
| Ingresso 1 | #ff0000 |
| Ingresso 2 | #0000ff |
| Tipo | Lineare |
| Angolo (gradi) | 90 |
| Ripetuto | Disattivo |
| Uscita 1 | background: #ff0000; |
| Uscita 2 | background: linear-gradient(90deg, #ff0000, #0000ff); |
| Uscita 3 | background-image: linear-gradient(90deg, #ff0000, #0000ff); |
Il gradiente lineare a 90 gradi va dal rosso a sinistra al blu a destra. Il rosso uniforme funge da ripiego.
Come funziona
- Un colore per riga. Va bene qualsiasi colore CSS: hex, rgb(), hsl(), un nome di colore.
- Aggiungi una posizione dopo un colore per fissarlo: «#000 80%».
- Scegli lineare, radiale o conico, e l’angolo o il centro.
- Copia la dichiarazione.
Domande frequenti
- Perché prima c’è un colore pieno?
- È la riserva. Tutto ciò che non sa leggere il gradiente — un browser vecchio, un programma di posta, un motore PDF — prende la prima dichiarazione e ignora la seconda. Senza, quei lettori non ottengono alcuno sfondo.
- Dove punta 180deg?
- In basso. In CSS 0deg punta in alto e l’angolo gira in senso orario, al contrario della vecchia sintassi -webkit- e della maggior parte degli strumenti di progettazione. È la cosa che qui si sbaglia al contrario più spesso.
- Perché testo e non una tela da trascinare?
- Perché una tela non si incolla in una revisione di codice. Qui l’uscita è una dichiarazione: confrontabile, versionabile e leggibile dalla prossima persona che aprirà il file.
- Viene inviato qualcosa a un server?
- No. Gira nel browser: quello che incolli resta sul tuo computer.
Strumenti correlati
◒ Generatore di box-shadow CSS La dichiarazione, non una tela da trascinare. ◒ Convertitore di colore HEX, RGB, HSL e CMYK — più il rapporto di contrasto che decide la leggibilità. ◐ Verifica del contrasto Se qualcuno riesce davvero a leggerlo. ◒ Formattatore CSS Una dichiarazione per riga — o l’intero file su una sola.