Verlauf-Generator

Erstellen Sie lineare, radiale oder konische Verläufe, fügen Sie Farbstopps hinzu, bestimmen Sie die Richtung und kopieren Sie das CSS mit einem Klick.

Verlaufstyp
Farbstopps
CSS
Passen Sie die Stopps und die Richtung an, um Ihren Verlauf zu gestalten.

Jeder Verlauf wird direkt in Ihrem Browser gerendert. Keine Ihrer Einstellungen wird an BroBroGo übertragen.

FAQ

Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?

Ein linearer Verlauf blendet Farben entlang einer geraden Linie über einen definierten Winkel ineinander über. Ein radialer Verlauf breitet sich kreis- oder ellipsenförmig von der Mitte nach außen aus. Ein konischer Verlauf verläuft kreisförmig um den Mittelpunkt herum, ähnlich wie ein Farbkreis.

Was sind Farbstopps?

Jeder Farbstopp ist eine Farbe, die an einer bestimmten Position entlang des Verlaufs verankert ist – 0 % am Anfang, 100 % am Ende. Verschieben Sie einen Stopp, um den Schwerpunkt einer Farbe zu verändern, oder fügen Sie weitere Stopps für komplexere Übergänge hinzu. Sie können bis zu acht Stopps verwenden.

Wie steuere ich die Richtung des Verlaufs?

Bei einem linearen oder konischen Verlauf bestimmt der Winkel-Schieberegler die Richtung – 0° zeigt nach oben, 90° nach rechts. Ein radialer Verlauf hat keinen Winkel; wählen Sie stattdessen eine Kreis- oder Ellipsenform, um die Ausbreitung anzupassen.

CSS Cubic-Bezier-GeneratorVerschieben Sie die beiden Griffe, um eine Easing-Kurve zu gestalten, vergleichen Sie die Bewegung live und kopieren Sie den cubic-bezier()-Wert.Box-Shadow-GeneratorNutzen Sie Schieberegler für Ihren Box-Shadow, legen Sie Ebenen für mehr Tiefe übereinander und kopieren Sie das fertige CSS sofort.Border-Radius-GeneratorRunden Sie jede Ecke mit Schiebereglern ab, gestalten Sie organische Blobs im elliptischen Modus und kopieren Sie das CSS sofort.Flexbox-GeneratorRichten Sie einen Flex-Container und seine Elemente mit visuellen Steuerelementen ein, sehen Sie Änderungen sofort live und kopieren Sie das CSS mit einem Klick.CSS-Grid-GeneratorDefinieren Sie Spalten und Zeilen, ziehen Sie Elemente über die Zellen und kopieren Sie das Grid-CSS samt passendem HTML mit einem Klick.CSS-clamp()-RechnerGeben Sie eine Größe für kleine und große Bildschirme ein und erhalten Sie einen flüssigen clamp()-Wert, der dazwischen stufenlos skaliert – für Schriftgrößen, Padding, Margins oder Gaps.FarbkonverterKonvertieren Sie Farben zwischen HEX, RGB, HSL, HSV, CMYK und LAB – bearbeiten Sie ein Feld und die restlichen Werte passen sich sofort an.CSS-Formatierer & -MinimiererRücken Sie unordentliches CSS ein, um es lesbar zu machen, oder minimieren Sie es für die Veröffentlichung – mit einem sicheren Modus, der die Reihenfolge Ihrer Regeln niemals ändert.Kontrast-RechnerGeben Sie eine Text- und Hintergrundfarbe ein, um das WCAG-Kontrastverhältnis und die bestandenen AA- und AAA-Stufen zu ermitteln.