Generatore di gradienti

Scegli due o più colori, trascina il gradiente a piacere, copia il CSS. Oppure scaricalo come PNG da usare come sfondo, per una presentazione o come sfondo per post social. Sono supportati gradienti lineari, radiali e conici, oltre a una modalità mesh-gradient per i morbidi sfondi in stile Apple che si vedono nelle UI moderne.

Tipi di gradienti spiegati

• Lineare: linea retta dal colore A al colore B. Selettore di direzione (dall'alto verso il basso, diagonale, ecc.).
• Radiale: concentrico — colore A al centro che sfuma verso il colore B ai bordi. Utile per effetti spotlight.
• Conico: ruota attorno a un punto centrale come una ruota dei colori. Di tendenza nel design UI moderno.
• Mesh (premium): più macchie di colore miscelate uniformemente. L'aspetto "Apple gradient".

Cosa puoi copiare

1. CSS: dichiarazione linear-gradient(...) o background-image: pronta per essere incollata.
2. Tailwind: la classe bg-gradient-* più vicina più eventuali aggiunte di colore personalizzato.
3. SVG: per uso scalabile in icone o grafiche UI.
4. Scarica PNG: qualsiasi dimensione, inclusi sfondo telefono (1284×2778), desktop (3840×2160) e quadrato (1080×1080).

Casi d'uso comuni

• Sfondi per telefono: i gradienti mesh sono enormi su iOS. Prova il nostro Anteprima sfondo iPhone per testare.
• Sfondi per post social: aspetto immediatamente in linea con il brand per grafiche di citazioni.
• Sezioni hero: gli sfondi con gradienti sono ovunque nelle pagine di destinazione.
• Presentazioni: sostituisci i noiosi sfondi solidi.

Scegliere colori funzionali

Adiacenti sulla ruota dei colori = sottili, armoniosi. Opposti = audaci, che attirano l'attenzione. Aggiungi una terza tappa intermedia per colmare un ampio divario. Per gradienti fedeli al marchio, incolla il tuo HEX del marchio e scegli una tinta o una tonalità per la seconda tappa. Usa il nostro Convertitore di colori per trovare tinte (HSL con luminosità maggiore) o tonalità (minore).