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.
Worin unterscheiden sich linearer, radialer und konischer Verlauf?
Der lineare läuft entlang eines Winkels von einem Punkt zum anderen, der radiale öffnet sich von der Mitte zum Rand, und der konische dreht sich um die Mitte. Alle aktuellen Browser können sie.
Wozu dienen die Farbstopps?
Jeder Farbstopp gibt eine Farbe und ihre Position von null bis hundert auf dem Verlauf an, und zwischen zwei Stopps berechnet der Browser den Übergang. Bis zu vier Stopps lassen sich setzen.
Kann ein Verlauf auf Text angewandt werden?
Ja. Man legt ihn als Hintergrund an und beschneidet ihn mit background-clip auf text, während die Schriftfarbe durchsichtig wird. Für Rahmen nimmt man stattdessen die Eigenschaft border-image.