Generatore Gradienti CSS
Tipo di gradiente
Color Stop
CSS generato
background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);Preset
Domande Frequenti
Tutto quello che devi sapere sui gradienti CSS
Cosa sono i gradienti CSS?
I gradienti CSS sono transizioni fluide tra due o più colori, create senza immagini. Si distinguono in lineari (da un punto all'altro), radiali (dal centro verso l'esterno) e conici (rotazione attorno a un punto centrale). Sono supportati da tutti i browser moderni.
Come funzionano i color stop?
I color stop definiscono il colore e la posizione (0-100%) in cui quel colore appare nel gradiente. Tra due stop il browser crea automaticamente la transizione. Puoi aggiungere fino a 4 stop per creare gradienti complessi.
Posso usare gradients su testi e bordi?
Sì! Per i testi usa: `background: gradient; -webkit-background-clip: text; color: transparent;`. Per i bordi usa la proprietà `border-image`. Il generatore crea il CSS per il background, ma le stesse regole di colore si applicano ovunque.
Quelle différence entre dégradé linéaire, radial et conique ?
Le linéaire va d'un point à un autre selon un angle, le radial s'ouvre du centre vers le bord, et le conique tourne autour du centre. Tous les navigateurs à jour les prennent en charge.
À quoi servent les color stops ?
Chaque color stop donne une couleur et sa position de zéro à cent dans le dégradé, et entre deux stops le navigateur calcule le fondu. On peut utiliser jusqu'à quatre stops.
Le dégradé peut-il servir sur du texte ?
Oui. Il s'applique en arrière-plan puis se découpe sur le texte avec background-clip réglé sur text et la couleur rendue transparente. Pour les bordures, on utilise plutôt la propriété border-image.