CSS-Verlauf-Generator

Erstellen Sie CSS-Verläufe visuell — linear, radial und konisch. Fügen Sie mehrere Farbstopps hinzu und kopieren Sie den fertigen CSS-Code.

Studio · neutrale Umgebung
90° 

  




  


  
  

  
  
  
  

    
Funktionen

    

      
      

        
        Linear / radial / conic
      

      
      

        
        Multiple color stops
      

      
      

        
        Angle / direction control
      

      
      

        
        Live preview & CSS code
      

      
    

  

  

  
  

    
Anleitung

    

      
        
        
1. Verlaufstyp und Winkel wählen; die Fläche zeigt die Vorschau in voller Größe.

        
        
2. Griffe auf der Leiste ziehen, um Stopps zu verschieben; ein Klick auf eine freie Stelle fügt einen hinzu (bis zu sechs). Feinjustierung über Farbfelder und Prozentwerte.

        
        
3. Das erzeugte CSS kopieren — auf dem Schachbrett lassen sich Streifen über Transparenz erkennen.

        
      
    

  


  
  
  
  

    
Häufig gestellte Fragen

    
    

      What types of gradients does CSS support?
      
CSS supports linear, radial, and conic gradients, each with different visual effects.

    

    
  

  

  
  
  

    
Verwandte Werkzeuge

    

      
      
        

          
        

        
CSS-Box-Shadow-Generator

        
Erstellen Sie CSS-box-shadow-Eigenschaften visuell mit Schiebereglern. Sehen Sie...

      
      
      
        

          
        

        
CSS-Border-Radius-Generator

        
Gestalten Sie CSS-border-radius visuell — steuern Sie alle vier Ecken einzeln od...

      
      
      
        

          
        

        
CSS-Flexbox-Spielwiese

        
Lernen und experimentieren Sie mit CSS Flexbox. Passen Sie Container-Eigenschaft...

      
      
      
        

          
        

        
CSS-Grid-Generator

        
Erstellen Sie CSS-Grid-Layouts visuell. Legen Sie Zeilen, Spalten und Abstände f...