CSSForge.top

CSS-Verlaufs-Generator

Mischen Sie bis zu 8 Farbstopps zu linearen, radialen oder konischen Verläufen — ziehen, justieren und produktionsfertigen Code kopieren.

Verlaufstyp
FarbstoppsKlicken zum Hinzufügen · Ziehen zum Verschieben
Presets
Vorschau

        
      

    


    
    

      
So verwenden Sie den Verlaufs-Generator

      
    
        
  1. Wählen Sie einen Verlaufstyp: linear, radial oder konisch.
    2. 
        
  2. Klicken Sie auf die Verlaufsleiste, um einen Farbstopp hinzuzufügen; ziehen Sie Stopps entlang der Leiste, um sie zu repositionieren.
    3. 
        
  3. Wählen Sie einen Stopp, um Farbe, Deckkraft und exakte Position zu ändern (bis zu 8 Stopps).
    4. 
        
  4. Justieren Sie Winkel (linear/konisch), Form (radial) oder Mittelpunkt, bis es passt.
    5. 
        
  5. Kopieren Sie die CSS-background-Deklaration oder wechseln Sie zum Tailwind-Tab für eine Utility-Klasse.
    6. 
      

    


    
    

      
Über diesen Verlaufs-Generator

      
CSS-Verläufe sind vom Browser generierte Bilder: linear-gradient malt entlang einer geraden Linie, radial-gradient strahlt von einem Mittelpunkt aus und conic-gradient fegt wie ein Farbkreis um ein Zentrum. Jeder akzeptiert zwei oder mehr Farbstopps mit optionalen Positionen. Sie von Hand zu schreiben — besonders mit vielen Stopps oder rgba-Transparenz — ist langsam und fehleranfällig.

      
Dieser Generator rendert Ihren Verlauf live, während Sie Farbstopps entlang der Leiste ziehen, den Winkel drehen oder den Mittelpunkt bewegen. Starten Sie mit einem der 10 kuratierten Presets (Sonnenuntergang, Ozean, Bonbon, Regenbogen…) und machen Sie ihn zu Ihrem. Die Ausgabe ist eine einzige background-Deklaration, die in jedem modernen Browser funktioniert; der Tailwind-Tab verpackt denselben Verlauf in Arbitrary-Value-Syntax für Utility-First-Workflows.

    


    
    

      
Verlaufs-FAQ

      

        

          Wie viele Farbstopps kann ich hinzufügen?
          
Bis zu 8 Stopps. Klicken Sie an beliebiger Stelle auf die Verlaufsleiste, um dort einen neuen Stopp einzufügen — seine Farbe wird automatisch aus den Nachbarn interpoliert. Ziehen Sie Stopps zum Repositionieren, wählen Sie einen zum Bearbeiten von Farbe und Deckkraft aus und löschen Sie ihn mit „Stopp löschen“ (mindestens 2 Stopps bleiben erhalten).

        

        

          Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
          
Lineare Verläufe überblenden Farben entlang einer geraden Linie in einem gegebenen Winkel. Radiale Verläufe breiten sich von einem Mittelpunkt kreisförmig oder elliptisch nach außen aus. Konische Verläufe drehen Farben um einen Mittelpunkt (wie ein Tortendiagramm oder Farbkreis) und unterstützen einen „from“-Startwinkel.

        

        

          Wie mache ich einen Verlauf mit Transparenz?
          
Wählen Sie einen beliebigen Farbstopp und senken Sie seinen Deckkraft-Regler. Der Generator gibt rgba()-Farben für diesen Stopp aus, sodass Sie zu transparent ausblenden oder den Verlauf über ein Hintergrundbild oder eine -farbe darunter mischen können.

        

        

          Wie kehre ich die Richtung der Farben um?
          
Klicken Sie auf „Umkehren“ — es spiegelt jede Stopp-Position (0 % wird zu 100 % usw.) und dreht den Verlauf um, ohne den Winkel zu ändern. Bei linearen Verläufen können Sie auch den Winkel-Regler um 180° drehen.

        

        

          Kann ich das als background-image statt background verwenden?
          
Ja. Der generierte Wert (linear-gradient(...), radial-gradient(...) oder conic-gradient(...)) ist ein  in CSS, Sie können ihn also in background-image, die background-Kurzform, border-image oder sogar list-style-image einfügen. Für Tailwind verwenden Sie die bereitgestellte bg-[...]-Klasse.