Generatore di gradienti CSS
Design CSS background gradients without memorizing syntax. Switch between linear and radial types, set an angle for linear gradients (degrees), and pick two color stops at 0% and 100%. The preview updates instantly; copy the full background or background-image declaration into your stylesheet. Supports HEX color input with validation.
Angolo (°)
Colore 1
Colore 2
CSS
background: linear-gradient(135deg, #6f9b96 0%, #e8c4b8 100%);
How to build a gradient
1. Choose linear or radial gradient.
2. For linear, set angle in degrees (0 = bottom to top, 90 = left to right).
3. Enter start and end colors (HEX).
4. Copy the CSS from the result card into your project.
Esempi di gradienti
Banner eroe lineare (135 gradi)
Dal verde acqua #6F9B96 al pesca #E8C4B8 a 135°: una diagonale comune nelle intestazioni delle pagine di destinazione. Usa come sfondo su una sezione a larghezza intera.
Faretto radiale
Tipo radiale con centro chiaro e bordo scuro: simula una vignetta: gradiente radiale (cerchio, #fff 0%, #333 100%).
Dissolvenza verticale (180 gradi)
Angolo di 180 per la dissolvenza dall'alto verso il basso dal colore del marchio al bianco: utile dietro le barre di navigazione.
Quando usare questo strumento
• Quando prototipi gli sfondi dell'interfaccia utente e desideri un feedback visivo immediato.
• Quando dimentichi se l'angolo di 90 gradi va da sinistra a destra o dall'alto in basso.
• Quando è necessario copiare e incollare CSS per CodePen, valori arbitrari Tailwind o trasferimento di progettazione.
Quando scegliere altro
• Quando hai bisogno di più di due interruzioni di colore, estendi manualmente CSS copiato o utilizza un'app di progettazione.
• Quando desideri gradienti conici (sweep), non supportati qui.
• Quando hai bisogno di varianti automatiche della modalità oscura, duplica e regola i colori separatamente.
Il colore si ferma nel dettaglio
Uno stop è il colore più la posizione opzionale: #ff0000 0%, #0000ff 50%, #00ff00 100%. Il browser interpola l'RGB tra le fermate. Le fermate intermedie creano tramonti fasciati o righe multimarca. Inizia con due fermate qui, quindi incolla e aggiungi una terza fermata in devtools finché non appare corretta.
Angoli di gradiente lineari
CSS misura gli angoli in senso orario da "su" (0 gradi). Ciò è diverso dalla lezione di matematica in cui gli angoli spesso iniziano da destra. Se un gradiente sembra ruotato in modo errato, aggiungi o sottrai 90 gradi. Utilizza l'editing live di devtools insieme a questo generatore per la messa a punto.
Prestazioni e fallback
I gradienti sono compatibili con la GPU sui browser moderni. Per i client molto vecchi, imposta un colore di sfondo solido sul colore di stop più chiaro prima della linea del gradiente.
Domande frequenti
Qual è la sintassi CSS per un gradiente lineare?
sfondo: gradiente lineare (angolo, colore1 0%, colore2 100%); L'angolo è in gradi; i colori sono fermate lungo la linea.
Come funzionano gli arresti del colore?
Gli fermi segnano il punto in cui ciascun colore si trova sulla linea del gradiente. 0% è l'inizio, 100% la fine. Questo strumento corregge due fermate; aggiungine altro nel tuo editor, se necessario.
Lineare o radiale?
Fusioni lineari lungo una linea retta. Il radiale si fonde verso l'esterno da un punto centrale: ottimo per cerchi e punti deboli.
Quali valori angolari sono comuni?
0° verso l'alto, 90° verso destra, 180° verso il basso, 135° in diagonale: comune per carte ed eroi.
Imposta lo sfondo o l'immagine di sfondo?
L'output utilizza la scorciatoia di sfondo adatta alla maggior parte dei div; puoi dividerlo in immagine di sfondo se sovrascrivi altri livelli.
I colori vengono inviati a un server?
No. Anteprima dei rendering localmente.
E' gratis?
Sì, non è necessario alcun account.