Entwerfen Sie wunderschöne Farbverläufe und exportieren Sie sie als CSS oder Bilder
Wählen Sie Farben aus, fügen Sie Stopps hinzu und passen Sie den Winkel oder Mittelpunkt an, um genau den Farbverlauf zu erstellen, den Sie benötigen. Das Tool unterstützt lineare, radiale und konische Farbverläufe mit unbegrenzten Farbstopps. Kopieren Sie den CSS-Code für Ihr Stylesheet oder laden Sie den Farbverlauf als hochauflösendes PNG zur Verwendung in Designprojekten herunter.
Nutzen Sie dieses Tool kostenlosMerkmale
Drei Farbverlaufstypen
Erstellen Sie lineare Farbverläufe mit beliebigem Winkel, radiale Farbverläufe mit anpassbarem Mittelpunkt und anpassbarer Form oder konische Farbverläufe, die um einen Punkt verlaufen. Wechseln Sie zwischen den Typen und die Vorschau wird sofort aktualisiert.
Unbegrenzte Farbstopps
Fügen Sie entlang der Verlaufsleiste so viele Farbstopps hinzu, wie Sie benötigen. Ziehen Sie Stopps, um sie neu zu positionieren, doppelklicken Sie, um die Farbe zu ändern, oder klicken Sie mit der rechten Maustaste, um sie zu löschen. Jeder Stopp unterstützt die Deckkraft für halbtransparente Farbverläufe.
CSS-Code-Ausgabe
Das Tool generiert gültigen CSS-Hintergrundbildcode mit Herstellerpräfixen. Kopieren Sie den Code und fügen Sie ihn direkt in Ihr Stylesheet ein. Die Ausgabe wird in Echtzeit aktualisiert, während Sie den Farbverlauf bearbeiten.
PNG-Bildexport
Laden Sie den Farbverlauf als PNG in beliebiger Auflösung herunter – von 100-Pixel-Miniaturansichten bis hin zu 4000-Pixel-Bannern. Verwenden Sie das Bild als Hintergrund, Overlay oder Designelement in Tools, die keine CSS-Verläufe unterstützen.
Wie zu verwenden
Wählen Sie den Verlaufstyp
Wählen Sie linear, radial oder konisch. Legen Sie für linear den Winkel fest. Legen Sie für radial den Mittelpunkt und die Form fest.
Farben hinzufügen und anpassen
Klicken Sie auf die Verlaufsleiste, um Farbstopps hinzuzufügen. Ziehen Sie, um die Position neu zu positionieren, doppelklicken Sie, um die Farbe zu ändern, und passen Sie die Deckkraft für jeden Stopp an.
CSS kopieren oder herunterladen
Kopieren Sie den generierten CSS-Code für die Webnutzung oder legen Sie eine Auflösung fest und laden Sie den Farbverlauf als PNG-Bild herunter.
Spezifikationen
| Verlaufstypen | Linear, radial, konisch |
| Die Farbe hört auf | Unbegrenzt |
| Winkelbereich | 0–360° |
| CSS-Ausgabe | Standard- und Herstellerpräfixe |
| PNG-Export | Bis zu 4000 × 4000 Pixel |
| Verarbeitung | Clientseitig (sofort) |
Related Magic Eraser Tools
Häufige Fragen
Kann ich einen Farbverlauf mit Transparenz erstellen?
+
Ja. Jeder Farbstopp verfügt über einen Deckkraftregler. Stellen Sie die Deckkraft auf unter 100 % ein, um halbtransparente Bereiche im Farbverlauf zu erzeugen. Die CSS-Ausgabe verwendet RGBA-Werte und der PNG-Export behält den Alphakanal bei.
Was ist ein konischer Gradient?
+
Ein konischer Farbverlauf strahlt Farbstopps um einen Mittelpunkt aus, wie der Schwung eines Uhrzeigers. Es ist nützlich für Effekte im Kreisdiagrammstil, Farbräder und dekorative Hintergründe. Die Browserunterstützung ist in modernen Browsern hervorragend.
Kann ich das generierte CSS in jedem Framework verwenden?
+
Ja. Die Ausgabe ist Standard-CSS, das in einfachem HTML, React, Vue, Tailwind und jedem anderen Framework funktioniert, das Inline- oder Stylesheet-basiertes CSS unterstützt.
Benötigen Sie einen Farbverlauf über einem Foto?
AI Enhance kann den Farbton und die Beleuchtung Ihrer Fotos anpassen, und mit unserem Bildüberlagerungstool können Sie für einen eleganten Look einen Farbverlauf über jedes Bild legen.
Probieren Sie es kostenlos ausMore free tools
Explore our other limited free edits after sign-in photo and image tools.
Passen Sie die Größe von Bildern auf exakte Pixelabmessungen für soziale Medien, das Web und den Druck an. Keine Anmeldung erforderlich. Unterstützt JPEG, PNG und WebP bis zu 50 MB.
Komprimieren Sie JPEG-, PNG- und WebP-Bilder um bis zu 80 % mit minimalem sichtbaren Qualitätsverlust. Passen Sie den Qualitätsregler an, um die volle Kontrolle zu erhalten. Keine Anmeldung erforderlich.
Konvertieren Sie PNG-Bilder sofort in das JPEG-Format. Passen Sie die Ausgabequalität an, wählen Sie eine Hintergrundfarbe für transparente Bereiche und laden Sie es herunter – keine Anmeldung erforderlich.
Konvertieren Sie JPEG-Bilder in das PNG-Format, um verlustfreie Qualität und Transparenz zu gewährleisten. Ideal vor der Hintergrundentfernung. Keine Anmeldung oder Installation erforderlich.
Konvertieren Sie Apple HEIC- und HEIF-Fotos in ein universell kompatibles JPEG-Format. Funktioniert im Browser – keine App-Installation, keine Anmeldung, kein Datei-Upload auf einen Server.
Konvertieren Sie JPEG und PNG in WebP für schnellere Seitenladevorgänge oder konvertieren Sie WebP aus Kompatibilitätsgründen zurück in JPEG/PNG. Keine Anmeldung, keine Installation, läuft im Browser.