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%.
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.
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.
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.