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 kostenlosBrowser tool
Gradient generator
Create CSS gradients, preview them live, and export a PNG locally in your browser.
background-image: linear-gradient(90deg, rgba(255, 56, 56, 1) 0%, rgba(124, 58, 237, 1) 100%);Starter palettes
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.
Merkmale
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.
After this task
After this free tool, open Ai Enhance for the next AI editing workflow.
Continue with Ai EnhanceSpezifikationen
| 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.
Konvertieren Sie Farben zwischen den benannten Formaten HEX, RGB, HSL, HSB, CMYK und CSS. Sehen Sie sich eine Live-Vorschau an, kopieren Sie beliebige Werte und exportieren Sie eine Farbkarte.
Konvertieren Sie HEX-Farbcodes in RGB-Werte und umgekehrt. Live-Vorschau, Kopieren mit einem Klick und CSS-Snippet-Ausgabe. – funktioniert in Ihrem Browser.
Wählen Sie eine beliebige Farbe aus einem hochgeladenen Bild aus und erhalten Sie sofort die HEX-, RGB- und HSL-Codes. Erstellen Sie Paletten aus Fotos für Webdesign, Branding und Illustration.
Laden Sie ein Foto hoch und extrahieren Sie 5–10 dominante Farben mit HEX-, RGB- und HSL-Codes. Kopieren Sie Farbfelder und exportieren Sie sie als ASE- oder CSS-Variablen.
Generieren Sie QR-Codes für URLs, Text, WLAN-Anmeldeinformationen und vCards. Passen Sie die Farben an, fügen Sie ein Logo in der Mitte hinzu und laden Sie es als PNG oder SVG herunter.
Berechnen Sie Breite, Höhe oder Seitenverhältnis für Bilder und Videos. Geben Sie zwei beliebige Werte ein und erhalten Sie den dritten. Voreingestellte Verhältnisse für soziale Medien, Film und Druck.