Generator für CSS-Verläufe
Art des Verlaufs
Farbstopp
Erzeugtes CSS
background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);Vorlagen
Häufige Fragen
Was man über CSS-Verläufe wissen sollte
Was sind CSS-Verläufe?
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.
Wie funktionieren die Farbstopps?
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.
Kann ich Verläufe auf Text und Rahmen anwenden?
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.