Generatore Gradiente CSS Gratis: Creare Sfumature Lineari Radiali
36 utilizzi135°
Consigli Gradienti
Lineare e radiale
Lineare: linea retta. Radiale: dal centro. Regola angolo.
Colori personalizzabili
Scegli colori e posizioni. Multiple fermate.
CSS pronto
linear-gradient() o radial-gradient(). Copia e incolla.
Domande Frequenti
Come creare gradiente?
Seleziona tipo, colori, angolo e copia CSS.
Che tipi?
Lineare e radiale. Multipli colori.
Più di due colori?
Sì, aggiungi fermate colore.
Qual è la differenza tra gradienti lineari e radiali generati qui?
I gradienti lineari scorrono in linea retta, orizzontalmente, verticalmente o diagonalmente. Controlli la direzione con il cursore dell'angolo, ad esempio impostandolo su 90 gradi per uno svanimento verticale. I gradienti radiali si espandono verso l'esterno da un punto centrale, creando un effetto circolare o ellittico. Non puoi controllare direttamente la forma oltre il circolare con questo strumento, ma puoi scegliere dove si trova il centro.
Il codice del gradiente funziona in tutti i browser?
Lo strumento genera CSS standard compatibile con Chrome, Firefox, Safari ed Edge. Internet Explorer 9 e versioni precedenti non mostrano i gradienti, ma ciò rappresenta meno dell'1% del traffico globale odierno. Per i browser vecchi, aggiungi un colore di sfondo solido come fallback nel tuo CSS prima della proprietà del gradiente. Così gli utenti vedranno un colore piatto se i gradienti non sono supportati. Test rapido: incolla il codice negli strumenti sviluppatore di un browser moderno per verificarlo.
Come Usare
- Scegli tipo
- Seleziona colori
- Regola angolo
- Anteprima
- Copia CSS