Gradient-Generator — CSS-Gradienten erstellen
Erstellen Sie schöne CSS-Gradienten mit vollständiger Kontrolle über Farben, Positionen und Typen. Generieren Sie Code für CSS, TailwindCSS und verwenden Sie gespeicherte Gradienten.
Gradient-Vorschau
Gradient-Einstellungen
Farbstopps
Stopp 1
Stopp 2
Generierter Code
.gradient {
background: linear-gradient(to right, #3498db 0%, #e74c3c 100%);
}Ähnliche Werkzeuge
Entdecken Sie andere nützliche Farbwerkzeuge
Vollständige Anleitung zur Verwendung des Gradient-Generators
Gradient-Generator ist ein leistungsstarkes Online-Tool zur Erstellung schöner CSS-Gradienten mit vollständiger Kontrolle über Farben, Positionen und Typen. Mit diesem Service können Sie professionelle Gradienten für Ihr Design erstellen.
Schritt 1: Gradient-Typ wählen
Wählen Sie Gradient-Typ: linear oder radial. Lineare Gradienten erstellen sanfte Übergänge in eine bestimmte Richtung, während radiale Gradienten vom Zentrum zu den Rändern übergehen.
Schritt 2: Richtung oder Form konfigurieren
Für lineare Gradienten wählen Sie Richtung (nach oben, rechts, unten, links oder diagonale Richtungen). Für radiale Gradienten wählen Sie Form: Kreis oder Ellipse.
Schritt 3: Farbstopps hinzufügen
Fügen Sie Farbstopps hinzu, indem Sie auf 'Stopp Hinzufügen' klicken. Für jeden Stopp setzen Sie Farbe (mit Farbwähler oder HEX-Eingabe) und Position (0-100%). Mindestens 2 Stopps sind für einen Gradienten erforderlich.
Schritt 4: Zusätzliche Funktionen verwenden
Verwenden Sie 'Zufälliger Gradient' für die Generierung eines zufälligen Gradienten, 'Gleichmäßige Verteilung' für gleichmäßige Verteilung der Stopp-Positionen und 'Gradient Umkehren' für Änderung der Farbreihenfolge.
Schritt 5: Generierten Code kopieren
Wählen Sie Code-Format (CSS, TailwindCSS oder Zeichenkette) und klicken Sie auf 'Kopieren'. Der Code wird in die Zwischenablage kopiert und ist bereit zur Verwendung in Ihrem Projekt.
Schritt 6: Gradient speichern
Klicken Sie auf 'Gradient Speichern', um den aktuellen Gradienten in der Historie zu speichern. Gespeicherte Gradienten können später geladen oder gelöscht werden.
Wie man den Gradient-Generator verwendet
Wie man einen linearen Gradienten erstellt
Wählen Sie Typ 'Linear' und Richtung (z.B. 'nach rechts'). Fügen Sie mindestens 2 Farbstopps mit verschiedenen Farben und Positionen hinzu. Der Gradient wird automatisch erstellt.
Wie man einen radialen Gradienten erstellt
Wählen Sie Typ 'Radial' und Form (Kreis oder Ellipse). Fügen Sie Farbstopps hinzu. Der radiale Gradient erstellt einen sanften Übergang vom Zentrum zu den Rändern.
Wie man TailwindCSS-Gradienten verwendet
Nach der Erstellung des Gradienten wählen Sie Format 'TailwindCSS' im Code-Block. Kopieren Sie die generierten Klassen und verwenden Sie sie in Ihrem HTML mit TailwindCSS.
Wie man Gradienten speichert und lädt
Klicken Sie auf 'Gradient Speichern', um den aktuellen Gradienten zu speichern. Gespeicherte Gradienten werden im Historie-Bereich angezeigt. Klicken Sie auf den Gradienten zum Laden oder auf 'Löschen' zum Entfernen.
Wie man einen zufälligen Gradienten verwendet
Klicken Sie auf 'Zufälliger Gradient', um automatisch einen zufälligen Gradienten mit zufälligen Farben, Typ und Richtung zu generieren. Dies ist großartig für Inspiration.
Wie man Stopps gleichmäßig verteilt
Klicken Sie auf 'Gleichmäßige Verteilung', um automatisch die Positionen aller Farbstopps gleichmäßig zu verteilen. Dies ist nützlich für die Erstellung symmetrischer Gradienten.
Häufig gestellte Fragen zum Gradient-Generator
Welche Gradient-Typen werden unterstützt?
Der Generator unterstützt zwei Gradient-Typen: linear und radial. Lineare Gradienten erstellen sanfte Übergänge in eine bestimmte Richtung, während radiale Gradienten vom Zentrum zu den Rändern übergehen.
Wie viele Farbstopps kann ich hinzufügen?
Sie können beliebig viele Farbstopps hinzufügen, aber mindestens 2 Stopps sind erforderlich, um einen Gradienten zu erstellen. Mehr Stopps ermöglichen die Erstellung komplexerer und interessanterer Gradienten.
Kann ich Gradienten in TailwindCSS verwenden?
Ja, der Generator erstellt TailwindCSS-Klassen für Ihre Gradienten. Wählen Sie Format 'TailwindCSS' im Code-Block und kopieren Sie die generierten Klassen.
Wie speichere ich einen Gradienten?
Klicken Sie auf 'Gradient Speichern', um den aktuellen Gradienten in der Historie zu speichern. Gespeicherte Gradienten werden im localStorage des Browsers gespeichert und sind beim nächsten Besuch verfügbar.
Was ist gleichmäßige Verteilung?
Gleichmäßige Verteilung verteilt automatisch die Positionen aller Farbstopps gleichmäßig von 0% bis 100%. Dies ist nützlich für die Erstellung symmetrischer Gradienten.
Kann ich Gradienten für Website-Hintergrund verwenden?
Ja, Gradienten sind perfekt für Website-Hintergründe. Kopieren Sie den generierten CSS-Code und verwenden Sie ihn in der background-Eigenschaft Ihres Elements.
Wie kehre ich einen Gradienten um?
Klicken Sie auf 'Gradient Umkehren', um die Farbreihenfolge im Gradienten zu ändern. Dies kehrt die Positionen aller Stopps um und erzeugt einen umgekehrten Effekt.
Kann ich Gradienten für Mobile-Design verwenden?
Ja, Gradienten funktionieren großartig auf mobilen Geräten. CSS-Gradienten werden vollständig von modernen Browsern und mobilen Geräten unterstützt.