⭐ 0
🔍
Text Bild PDF & Dokumente Audio Musik Elektronik Zeit Dienstprogramme Validatoren Esoterik Spiele

CSS-Generator für konische Farbverläufe

Erstellen Sie CSS-Verläufe visuell: linearer, radialer oder konischer Typ, Winkelregler und bis zu sechs Farbstopps mit einer Live-Vorschau in voller Breite und kopierbarem Code.

90°
Verarbeitung... 0%

Ergebnis

Auf dieser Seite wird der Verlaufsgenerator mit dem bereits ausgewählten konischen Typ geöffnet: Anstatt entlang einer Linie oder aus der Mitte heraus zu verblassen, bewegen sich die Farben wie ein Uhrzeiger um die Mitte, beginnend mit dem Winkel, den Sie auf dem Schieberegler eingestellt haben.

conic-gradient() ist die neueste der drei CSS-Verlaufsfunktionen und diejenige hinter Kreisdiagrammen, Farbrädern und auffälligen rotierenden Randeffekten. Stopppositionen in Prozent sind Positionen rund um den Kreis – zwei Stopps bei 0 % und 100 % gehen rundherum sanft ineinander über, während nahe beieinander platzierte Stopps klare Keile erzeugen.

Passen Sie den Startwinkel an und stoppen Sie, bis die Vorschau richtig angezeigt wird, und kopieren Sie dann die Hintergrundlinie. Alle modernen Browser unterstützen konische Farbverläufe, sodass der Code sicher versendet werden kann.

🛡️
Im Browser ausgeführt

Ihre Dateien und Eingaben verlassen dieses Gerät nie. Die Verarbeitung läuft vollständig offline. 100 % sicher.

Akzeptierte Formate & Regeln

  • Wählen Sie den Verlaufstyp (linear, radial, konisch) mit einem Winkelschieberegler für den linearen und konischen Modus aus.
  • Liste der Farbstopps: zwei Stopps zum Starten, Hinzufügen oder Entfernen von bis zu sechs, jeder mit eigener Farbauswahl und Position in Prozent.
  • Kopierbare Hintergrund-CSS-Zeile sowie vorgefertigte voreingestellte Seiten für Sonnenuntergangs-, Ozean- und Pastellverläufe.

Wichtigste Vorteile

✓ Die Vorschau in voller Breite wird bei jeder Änderung – Typ, Winkel und jedem Farbstopp – neu gezeichnet, sodass das kopierte CSS genau das ist, was Sie gesehen haben.
✓ Bis zu sechs Farbstopps mit individuellen Positionen decken alles ab, von einer einfachen zweifarbigen Überblendung bis hin zu komplexen Multiband-Hintergründen.
✓ Eine Deklaration, drei Motoren: Wechseln Sie zwischen linear, radial und konisch, ohne Ihre Anschläge neu aufbauen zu müssen.

Anwendungsfälle

  • • Erstellen Sie einen Heldenabschnitt-Hintergrund, indem Sie den Winkel und die Farbstopps ziehen, anstatt linear-gradient() manuell zu bearbeiten und neu zu laden.
  • • Vergleichen Sie mit einem Schalter dieselben Farbstopps als lineare, radiale und konische Farbverläufe – die Stopps werden zwischen den Typen übertragen.
  • • Schnappen Sie sich eine bewährte Kombination von der Voreinstellungsseite „Sonnenuntergang“, „Meer“ oder „Pastell“ und passen Sie sie an Ihre Markenfarben an.