Funktionsweise des Verlauf-Generators
Mit diesem Werkzeug können Sie einen CSS-Verlauf erstellen, indem Sie den gewünschten Verlaufstyp auswählen, die Richtung oder Form anpassen und bis zu acht Farbstopps hinzufügen. Während Sie Änderungen an den Einstellungen vornehmen, sehen Sie eine Live-Vorschau des Verlaufs direkt auf dem Bildschirm und können den generierten CSS-Code mit einem einzigen Klick kopieren.
Der Generator startet standardmäßig mit einem voreingestellten Verlauf, der zwei Farbstopps enthält: #6366f1 bei 0% und #ec4899 bei 100%.
Die verschiedenen Verlaufstypen und ihre Eigenschaften
Der Verlauf-Generator unterstützt drei grundlegende Verlaufstypen, die Sie unter der Option Verlaufstyp auswählen können:
- Linear: Ein linearer Verlauf blendet Farben entlang einer geraden Linie ineinander über, wobei der eingestellte Winkel die genaue Richtung bestimmt.
- Radial: Ein radialer Verlauf breitet sich von der Mitte aus kreis- oder ellipsenförmig nach außen aus.
- Konisch (Conic): Ein konischer Verlauf verläuft kreisförmig um den Mittelpunkt herum, ähnlich wie die Segmente eines Farbkreises.
Richtung, Winkel und Formen präzise einstellen
Je nachdem, welchen Verlaufstyp Sie für Ihr Design wählen, stehen Ihnen unterschiedliche Steuerungselemente zur Verfügung:
Winkel bei linearen und konischen Verläufen
Für die Typen Linear und Konisch (Conic) verwenden Sie den Schieberegler für den Winkel, um die Richtung des Farbverlaufs festzulegen. Ein Wert von 0° zeigt dabei präzise nach oben, während ein Wert von 90° nach rechts zeigt.
Formen bei radialen Verläufen
Radiale Verläufe nutzen keinen Winkel. Stattdessen bestimmen Sie das Erscheinungsbild unter der Option Form. Hier können Sie zwischen den folgenden geometrischen Mustern wählen:
- Ellipse: Der Verlauf dehnt sich als Ellipse aus.
- Kreis: Der Verlauf breitet sich als gleichmäßiger Kreis aus.
Farbstopps hinzufügen und positionieren
Ein Farbstopp definiert eine bestimmte Farbe, die an einer festen Position entlang des Verlaufs verankert ist.
- Positionierung: Die Position wird als Prozentwert von
0%(dem Anfang des Verlaufs) bis100%(dem Ende des Verlaufs) angegeben. - Standardwerte für neue Stopps: Wenn Sie einen neuen Farbstopp hinzufügen, wird dieser standardmäßig auf die Position
50%gesetzt. - Maximale Anzahl: Sie können insgesamt bis zu acht Farbstopps für Ihren Verlauf konfigurieren. Sobald diese maximale Anzahl von acht Farbstopps erreicht ist, wird die Schaltfläche Farbstopp hinzufügen automatisch deaktiviert.
CSS-Code generieren und kopieren
Unter der Sektion CSS stellt das Tool den fertigen Code bereit, der exakt Ihren Einstellungen entspricht.
Um den Code in Ihre Zwischenablage zu übernehmen, klicken Sie einfach auf die Schaltfläche CSS kopieren. Sobald Sie darauf geklickt haben, ändert sich der Zustand der Schaltfläche zur Bestätigung auf Kopiert. Diesen Code können Sie direkt in Ihre Stylesheets einfügen, um beispielsweise einen CSS-Hintergrund für Ihre Website zu gestalten.
Datenschutz und Datenverarbeitung
Bei der Nutzung dieses Tools bleiben Ihre Daten vollkommen privat. Jeder Verlauf wird direkt in Ihrem Browser gerendert. Keine Ihrer Einstellungen oder Eingaben wird an BroBroGo übertragen.
Häufig gestellte Fragen (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.