CSS Gradient
Generator
Erstellen Sie schöne CSS-Farbverläufe (linear, radial, konisch) und Muster mit einer intuitiven Benutzeroberfläche. Kostenlos, sicher, lokal im Browser.
Farbe bearbeiten
Generierter CSS-Code
Generierter CSS-Code
Das könnte dir auch gefallen
Über CSS-Gradienten-Generator
Der CSS Gradient Generator ist ein kostenloses Entwickler-Tool zum einfachen Designen wunderschöner Farbverläufe und CSS-Muster. Ohne Bilddateien oder JavaScript können Sie über eine intuitive Benutzeroberfläche lineare, radiale und konische Verläufe erstellen und den CSS-Code exportieren.
Sie können mehrere Farben hinzufügen und die Alpha-Transparenz stufenlos über Schieberegler anpassen. Mit 24 vordefinierten Vorlagen und einem Generator für 12 CSS-Muster können Sie nahtlos vom Entwurf bis zur Implementierung in Ihrem Browser arbeiten.
Bedienungsanleitung
Typ und Grundeinstellungen wählen
Öffnen Sie den Reiter 'Gradient' und wählen Sie den Stil: linear, radial oder konisch. Passen Sie für lineare Verläufe den Winkel an; setzen Sie bei radialen Verläufen die Mittelpunktposition und die Form.
Farben hinzufügen und bearbeiten
Klicken Sie auf den Verlauf, um einen Farbpunkt hinzuzufügen. Ziehen Sie die Nadeln horizontal, um den Übergang anzupassen, und nutzen Sie die Farbauswahl (HEX oder HSLA), um die Deckkraft zu justieren.
Vorschau prüfen und CSS kopieren
Prüfen Sie das Ergebnis in Echtzeit. Verwenden Sie den 'Vollbild'-Button, um den gesamten Bildschirm auszufüllen, und klicken Sie auf 'CSS kopieren', um den Code direkt in Ihr Stylesheet zu übertragen.
Glossary
- CSS-Farbverlauf
- Eine Technik, die CSS-Funktionen wie linear-gradient() oder radial-gradient() nutzt, um Hintergründe mit sanften Farbübergängen zu zeichnen. Da keine Bilder geladen werden, verbessert dies die Ladegeschwindigkeit.
- Farbpunkt (Color Stop)
- Eine bestimmte Position (0% bis 100%) in einem Verlauf, an der eine Farbe definiert ist. Durch das Setzen vieler eng beieinander liegender Farbpunkte lassen sich auch scharfe Kanten im Verlauf erzeugen.
- Linearer Farbverlauf (linear-gradient)
- Die häufigste Verlaufsmethode, bei der sich die Farben linear entlang eines bestimmten Winkels (z.B. 135deg) oder einer Richtung (z.B. to right) ändern.
- Radialer Farbverlauf (radial-gradient)
- Eine Methode, bei der die Farben von einem Mittelpunkt kreisförmig oder elliptisch nach außen strahlen.
- Konischer Farbverlauf (conic-gradient)
- Eine Methode, bei der die Farben im Uhrzeigersinn um eine zentrale Achse verlaufen. Sehr praktisch, um reine CSS-Torten-Diagramme zu erstellen.
- HSLA-Farbe
- Ein System zur Angabe von Farben über vier Werte: Farbton (Hue), Sättigung, Helligkeit und Alpha (Transparenz). Ideal, wenn man eine Farbe intuitiv 'etwas dunkler' machen möchte.
Häufig gestellte Fragen
- Q.Darf ich den generierten CSS-Code auf einer kommerziellen Website nutzen?
- Ja, die Nutzung ist völlig kostenlos für kommerzielle Zwecke. Es gibt keine Urheberrechtsbeschränkungen auf den generierten CSS-Code.
- Q.Kann ich das Tool auch auf dem Smartphone verwenden?
- Ja, die Benutzeroberfläche ist responsiv. Aktionen wie das Hinzufügen und Verschieben von Farbpunkten sind für Touchscreens optimiert.
- Q.Der Verlauf wird in älteren Browsern wie dem IE nicht angezeigt.
- Alte Browser, einschließlich IE11, unterstützen moderne CSS-Funktionen (wie conic-gradient) möglicherweise nicht. Wir empfehlen, falls nötig eine statische background-color als Fallback zu definieren.
- Q.Wie ändere ich die Größe der generierten Hintergrundmuster?
- Die Skalierung können Sie über den Regler 'Größe' im Muster-Tab anpassen. Dies ändert automatisch die Eigenschaft background-size im CSS-Code.
- Q.Kann ich den Farbverlauf als Bilddatei speichern?
- Da dieses Tool reinen CSS-Code generiert, gibt es keine Exportfunktion für PNG oder JPG. Sie können jedoch den Vollbildmodus öffnen und einen Screenshot aufnehmen.
Anwendungsfälle
Design für Hero-Sektionen
Die Anwendung von Pastell- oder Sonnenuntergangsverläufen im ersten sichtbaren Bereich (Hero) einer Website hinterlässt einen starken visuellen Eindruck beim Nutzer.
Umsetzung von Glassmorphism
Wenn Sie einem Verlauf eine Alpha-Transparenz geben und backdrop-filter: blur() hinzufügen, lassen sich moderne UI-Komponenten in Milchglas-Optik erstellen.
Leichte Hintergrundmuster
CSS-basierte Muster (Punkte, Streifen) belasten die Ladezeit der Seite nicht im Geringsten, was zu besseren Ergebnissen bei PageSpeed Insights führt.
Datenvisualisierung
Konische Verläufe sind extrem nützlich, um simple Tortendiagramme oder Fortschrittsbalken direkt im CSS darzustellen, ganz ohne dicke JavaScript-Bibliotheken.
Feedback senden
Teilen Sie Ihre Gedanken mit, um das Tool zu verbessern.
Feedback ist vorübergehend ausgesetzt
Der Server ist ausgelastet oder der Spam-Schutz ist aktiv. Bitte versuchen Sie es später erneut.