DevTulz Online

CSS-Farbverlauf-Generator

Farbstopps

Was ist ein CSS-Farbverlauf?

CSS-Farbverläufe ermöglichen es, weiche Übergänge zwischen zwei oder mehr Farben ohne Bilddateien anzuzeigen. Es gibt drei Typen: linear-gradient (entlang einer Geraden), radial-gradient (vom Mittelpunkt ausstrahlend) und conic-gradient (um einen Mittelpunkt rotierend). Farbverläufe werden für Hintergründe, Schaltflächen, Überlagerungen und dekorative Elemente verwendet.

So verwenden Sie den CSS-Farbverlauf-Generator

  1. Wählen Sie eine Voreinstellung aus den Mustern oder konfigurieren Sie Ihren eigenen Verlauf.

  2. Wählen Sie den Verlaufstyp: linear, radial oder conic.

  3. Passen Sie den Winkel (für linear/conic) oder die Form (für radial) an.

  4. Bearbeiten Sie die Farbstopps — ändern Sie Farben und Positionen (0–100%).

  5. Fügen Sie Farbstopps hinzu oder entfernen Sie sie nach Bedarf.

  6. Kopieren Sie das CSS und fügen Sie es in Ihr Stylesheet ein.

Häufig Gestellte Fragen

Wie erstelle ich einen transparenten Farbverlauf? Verwenden Sie rgba()- oder hsla()-Farbwerte mit einem Alpha-Kanal von 0 für vollständige Transparenz. Zum Beispiel ist ein Farbstopp von rgba(0,0,0,0) vollständig transparentes Schwarz, nützlich für Ausblendungs-Overlays auf Bildern.

Wie erstelle ich einen harten Farbstopp (keine Übergänge)? Platzieren Sie zwei Farbstopps an der gleichen Position — einen, der endet, und einen, der an diesem Punkt beginnt. Zum Beispiel erzeugt Rot 50%, Blau 50% einen sofortigen Wechsel von Rot zu Blau in der Mitte ohne Farbverlaufsübergang.

Welche Browser unterstützen konische Farbverläufe? Konische Farbverläufe werden in allen modernen Browsern unterstützt (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Sie werden im Internet Explorer nicht unterstützt.

Kann ich mehrere Farbverläufe auf dem gleichen Element verwenden? Ja. CSS background akzeptiert eine durch Kommas getrennte Liste von Ebenen. Sie können Farbverläufe stapeln, sie mit Hintergrundbildern kombinieren und die Position und Größe jeder Ebene unabhängig steuern.

Keywords: CSS Farbverlauf Generator, linearer Verlauf, radialer Verlauf, konischer Verlauf, CSS Hintergrund Generator, Farbverlauf Farbwähler, CSS Gradient Tool