Konischer Gradient-Generator
Erstelle CSS conic-gradient()-Werte visuell mit einer interaktiven Torten-Diagramm-Vorschau. Füge bis zu 12 Farbstopps mit präziser Positionssteuerung hinzu, setze Startwinkel und Mittelpunkt und kopiere das CSS sofort. Wähle aus 6 Voreinstellungen (Regenbogen, Sonnenuntergang, Ozean, Neon, Pastell, Feuer) für einen schnellen Start. Vollständig privat, 100 % kostenlos und ohne Registrierung.
Presets
Preview
Color Stops (5)
background: conic-gradient(from 0deg at 50% 50%, #FF6B6B 0%, #FDCB6E 25%, #55EFC4 50%, #74B9FF 75%, #A29BFE 100%);
Warum unseren konischen Gradient-Generator nutzen?
- Sofortige Vorschau des konischen Verlaufs: Der Generator aktualisiert Torten-Vorschau und Verlaufsleiste bei jeder Änderung - ohne Knopfdruck. Passe jeden Farbstopp, Winkel oder Position an und sieh das Ergebnis sofort.
- Interaktive Torten-Diagramm-Vorschau: Das Canvas-basierte Torten-Diagramm zeigt genau, wie dein konischer Verlauf gerendert wird. Jeder Farbstopp entspricht einem Segment, der Startwinkel ist durch eine gestrichelte Linie klar markiert. Eine lineare Verlaufsleiste darunter bietet eine zusätzliche Referenzansicht.
- 100 % privat - kein Upload: Die gesamte Verlaufsgenerierung findet lokal in deinem Browser statt. Deine Farbwerte verlassen nie dein Gerät und werden nie an einen Server gesendet.
- Kostenlos und ohne Limits: Erstelle unbegrenzt konische Verläufe ohne Registrierung, Abo und Nutzungsobergrenze. Bis zu 12 Farbstopps pro Verlauf. Für immer komplett kostenlos.
Häufige Anwendungsfälle des konischen Gradient-Generators
- CSS-Hintergründe und UI-Elemente: Frontend-Entwickler nutzen den Generator für auffällige CSS-Hintergründe, Verlaufsrahmen und Ladespinner. Konische Verläufe sind perfekt für kreisförmige UI-Elemente und Farbkreis-Anzeigen.
- Datenvisualisierung und Diagramme: Dataviz-Designer nutzen konische Verläufe als Füllungen für Donut-Diagramme, Tacho-Hintergründe und kreisförmige Fortschrittsanzeigen. Die Torten-Vorschau zeigt genau, wie der Verlauf kreisförmigen Daten entspricht.
- Farbkreise und Harmonie-Werkzeuge: Designer nutzen den Generator für Farbkreise und Harmonie-Visualisierungen. Die präzise Positionierung der Farbstopps macht ihn ideal, um Farbbeziehungen zu zeigen.
- UI-Komponentendesign: UI-Designer nutzen konische Verläufe für Buttons, Karten, Avatare und Badge-Hintergründe mit kreisförmigem Verlaufseffekt. Die Mittelpunkt-Steuerungen erlauben die genaue Platzierung des Verlaufsursprungs.
- Marken- und Marketingdesign: Brand-Designer nutzen konische Verläufe in Hero-Bereichen, Logobehandlungen und Marketingmaterialien, um markante, moderne Effekte zu schaffen, die sich von linearen Verläufen abheben.
- Kreatives Experimentieren: Kreativprofis nutzen den Generator, um neue visuelle Effekte zu erkunden und unerwartete Farbkombinationen zu entdecken. Die Echtzeitvorschau macht Experimentieren schnell und unterhaltsam.
Was ist ein konischer Verlauf?
Ein konischer Verlauf ist ein CSS-Verlauf, der Farben um einen Mittelpunkt über 360 Grad übergehen lässt - wie ein Farbkreis oder Torten-Diagramm. Anders als lineare Verläufe (die gerade verlaufen) oder radiale Verläufe (die in Kreisen nach außen strahlen) laufen konische Verläufe um einen Mittelpunkt herum, was sie ideal für kreisförmige Designs, Farbkreise und Donut-Diagramm-Effekte macht. Die CSS-Funktion ist conic-gradient() und Teil des CSS Images Module Level 4.
So funktioniert unser konischer Gradient-Generator
- Farbstopps hinzufügen: Beginne mit der Standardpalette aus 5 Farben oder klicke auf eine Voreinstellung. Jeder Farbstopp hat einen Farbwähler, eine Hex-Eingabe und einen Positionsregler (0-100 %), der bestimmt, wo die Farbe auf dem Kreis erscheint.
- Winkel und Position anpassen: Die Startwinkel-Steuerung dreht den gesamten Verlauf (0-360°). Die Mittelpunkt-Steuerungen (X/Y) verschieben den Mittelpunkt des Verlaufs - 50 %/50 % platziert ihn in der Mitte, 0 %/0 % in der oberen linken Ecke.
- Vorschau und Kopie: Das Canvas-Torten-Diagramm rendert deinen Verlauf in Echtzeit mit einer gestrichelten Linie für den Startwinkel. Die CSS-Ausgabe aktualisiert sich automatisch. Klicke auf „CSS kopieren“, um die vollständige background-Deklaration zu kopieren.
Konisch vs. linear vs. radial
- Lineare Verläufe übergehen Farben entlang einer geraden Linie (oben-unten, links-rechts oder in jedem Winkel). Am besten für Hintergründe, Buttons und Kopfbereiche mit gewünschtem gerichteten Farbübergang.
- Radiale Verläufe übergehen Farben von einem Mittelpunkt nach außen in Kreisen oder Ellipsen. Am besten für Spotlight-Effekte, leuchtende Buttons und natürliche Schattierungen.
- Konische Verläufe übergehen Farben um einen Mittelpunkt in einem kreisförmigen Schwung. Am besten für Farbkreise, Donut-Diagramme, Ladespinner, Verlaufsrahmen auf kreisförmigen Elementen und jedes Design mit kreisförmigem Farbübergang.
- Wann konisch wählen: Nutze konische Verläufe, wenn Farben einen Kreis umschließen sollen - mit linearen oder radialen Verläufen lässt sich das nicht nachbilden. Sie sind besonders wirksam für UI-Elemente, die Rotation, Fortschritt oder zyklisches Verhalten suggerieren.
Browser-Unterstützung und Best Practices
CSS-konische Verläufe werden von allen modernen Browsern unterstützt - Chrome 69+, Firefox 83+, Safari 12.1+ und Edge 79+. Bei älteren Browsern degradieren konische Verläufe sauber: Der Browser zeigt die Fallback-Hintergrundfarbe. Setze immer eine Fallback-background-color vor deiner Verlaufsdeklaration.
Performance-Tipp: Konische Verläufe sind GPU-beschleunigt und performen in den meisten Fällen gut. Vermeide jedoch Animationen konischer Verläufe auf großen Elementen oder deren Einsatz auf häufig neu gezeichneten Elementen (wie scrollenden Hintergründen), da die Verlaufsberechnung die Bildrate beeinträchtigen kann.
Häufig gestellte Fragen
Ein konischer Gradient-Generator ist ein visuelles Tool, mit dem du CSS conic-gradient()-Werte ohne Code schreiben erstellen kannst. Unser Generator bietet eine interaktive Torten-Vorschau, Farbstopp-Verwaltung mit Farbwählern, Steuerungen für Startwinkel und Mittelpunktposition, Voreinstellungen für einen schnellen Start und CSS-Kopie per Klick zur sofortigen Nutzung in deinen Projekten.
Füge Farbstopps über den Farbwähler oder die Hex-Eingabe hinzu und passe ihre Position mit dem Schieberegler an, um zu steuern, wo jede Farbe auf dem Kreis erscheint. Mit dem Startwinkel-Regler drehst du den gesamten Verlauf. Passe Mittelpunkt X und Y an, um den Ursprung zu verschieben. Die Torten-Vorschau aktualisiert sich in Echtzeit. Klicke auf „CSS kopieren“, wenn das Ergebnis passt.
Radiale Verläufe übergehen Farben von einem Mittelpunkt nach außen in Kreisen und erzeugen einen Zielscheibeneffekt. Konische Verläufe übergehen Farben um einen Mittelpunkt in einem kreisförmigen Schwung und erzeugen einen Torten- oder Farbradeffekt. Radiale Verläufe eignen sich für Spotlight-Effekte, konische hingegen perfekt für Farbkreise, Donut-Diagramme und kreisförmige Fortschrittsanzeigen.
Du kannst bis zu 12 Farbstopps hinzufügen. Jeder Stopp hat einen eigenen Farbwähler und Positionsregler. Mindestens 2 Stopps sind erforderlich. Nutze die Schaltfläche „Stopp hinzufügen“ zum Ergänzen und das Papierkorb-Symbol zum Entfernen nicht benötigter Stopps.
Der Startwinkel (0-360°) bestimmt, wo der erste Farbstopp auf dem Kreis beginnt. Standardmäßig beginnt er bei 0° (oben). Eine gestrichelte Linie in der Torten-Vorschau zeigt die Position des Startwinkels. Das Drehen des Startwinkels verschiebt alle Farben um denselben Betrag auf dem Kreis.
Mittelpunkt X und Y (0-100 %) steuern, wo der Gradientenursprung im Element liegt. 50 %/50 % platziert ihn exakt in der Mitte. 0 %/0 % platziert ihn in der oberen linken Ecke. 100 %/100 % platziert ihn in der unteren rechten Ecke. Das ist der Parameter „at position“ der CSS-Funktion conic-gradient().
Ja. Der konische Gradient-Generator ist 100 % kostenlos, ohne Registrierung, ohne Premium-Funktionen und ohne Nutzungslimits. Erstelle unbegrenzt Verläufe ohne Einschränkungen oder versteckte Kosten.
CSS-konische Verläufe werden von allen modernen Browsern unterstützt: Chrome 69+, Firefox 83+, Safari 12.1+ und Edge 79+. Für ältere Browser degradieren konische Verläufe sauber: Der Browser zeigt die Fallback-Hintergrundfarbe. Setze immer eine Fallback-background-color vor deiner Verlaufsdeklaration.