Gradient Generator
Online CSS-Gradient erstellen, lineare und radiale Gradienten generieren, visuell anpassen und Code kopieren
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Was ist ein CSS-Gradient?
CSS-Gradient ist ein fließender Übergang zwischen zwei oder mehr Farben. Ein linearer Gradient verläuft entlang einer geraden Linie, ein radialer Gradient breitet sich von einem Mittelpunkt nach außen aus. Gradienten können für Hintergründe, Buttons, Karten und andere Elemente verwendet werden, um visuelle Effekte zu verbessern.
Verwendung
- Gradient-Typ wählen: Linear oder Radial
- Farb-Stops hinzufügen und Position jeder Farbe anpassen
- Bei linearem Gradient den Winkel einstellen, bei radialem Gradient die Zentrum-Position
- Gradient-Effekt in Echtzeit anzeigen
- "Code kopieren" klicken, um CSS-Code zu erhalten
- Voreinstellung wählen, um schnell häufige Gradienten zu übernehmen
Häufige Anwendungsfälle
- Web-Hintergrund: Seiten oder Abschnitten Gradient-Hintergrund hinzufügen
- Button-Styling: Visuell ansprechende Gradient-Buttons erstellen
- Karten-Dekoration: Karten Gradient-Ränder oder Hintergründe hinzufügen
- Marken-Farben: Gradient mit Marken-Farben erstellen
- UI-Design: Schnell Gradient-Prototyp für Design-Referenz generieren
Häufig gestellte Fragen (FAQ)
F: Was ist der Unterschied zwischen linearem und radialem Gradient?
A: Ein linearer Gradient verläuft in einem angegebenen Winkel entlang einer Richtung. Ein radialer Gradient breitet sich von einem Mittelpunkt nach außen aus und erzeugt einen kreisförmigen Ausbreitungs-Effekt.
F: Was bedeutet die Position eines Farb-Stops?
A: Die Position in Prozent gibt an, wo die Farbe im Gradient erscheint. 0% ist der Anfang, 100% das Ende. Beispiel: Eine Farbe bei 0% und eine andere bei 50% bedeutet, dass die erste Hälfte des Gradient von der ersten zur zweiten Farbe übergeht.
F: Wie erstelle ich einen Multi-Farb-Gradient?
A: Klicken Sie auf "Farbe hinzufügen", um einen Farb-Stop hinzuzufügen. Jede Farbe kann eine unterschiedliche Position haben, um komplexe Gradient-Effekte zu erzeugen.
F: Wie verwende ich den generierten CSS-Code?
A: Kopieren Sie den Code und verwenden Sie ihn als Wert für die background oder background-image CSS-Eigenschaft, z.B.: .element { background: linear-gradient(...); }