CSS Konischer Verlaufs-Generator Erstellen Sie CSS-Konische Verläufe für Kreisdiagramme, Farbräder und Sweep-Effekte.
Konischer Verlaufs-Generator
Erstellen Sie CSS-Konische Verläufe für Kreisdiagramme, Farbräder und Sweep-Effekte.
Farben auswählen
Wählen Sie drei Farben für den konischen Sweep.
Einstellungen anpassen
Setzen Sie den Startwinkel und die Mittelposition.
CSS kopieren
Kopieren Sie den generierten conic-gradient CSS-Code.
What Is Konischer Verlaufs-Generator?
Ein Konus-Verlaufs-Generator erstellt CSS-Verläufe, die um einen Mittelpunkt herum streichen und zwischen Farben winkelförmig statt linear oder radial übergehen. Konus-Verläufe drehen sich um einen Mittelpunkt, was sie perfekt für die Erstellung von Farbkreisen, piechart-ähnlichen Segmenten, Uhrzeigern und schwingenden Farbübergängen macht. Mit diesem Tool können Sie drei Farben auswählen, den Startwinkel festlegen und den Mittelpunkt positionieren. Der resultierende CSS-conic-gradient()-Code erstellt eine sanfte winkelförmige Übergang, die zurück zum Startfarbe übergeht. Konus-Verläufe sind ein leistungsfähiges CSS-Feature, das visuelle Effekte ermöglicht, die sonst SVG oder Canvas erfordern würden, und Ihre Designs rein in CSS und GPU-beschleunigt hält.
Why Use Konischer Verlaufs-Generator?
-
Erstellen Sie sweeping Winkel-Farbübergänge, die mit linearen oder radialen Gradienten unmöglich sind
-
Einstellbarer Startwinkel für Rotationskontrolle
-
Benutzerdefinierbare Mittelposition für Effekte außerhalb der Mitte
-
Ideal für dekorative Hintergründe und Datenvisualisierungen
-
Sauberer CSS-Output für den Produktiveinsatz
Common Use Cases
Farbräder
Erstellen Sie Regenbogen-Farbrad-Hintergründe mit konischen Gradienten.
Kreisdiagramme
Bauen Sie einfache CSS-nur-Kreisdiagramme mit harten Farbstops.
Dekorative Hintergründe
Erstellen Sie einzigartige Winkel-Gradienten-Hintergründe für Abschnitte und Karten.
Ladeanimationen
Entwerfen Sie CSS-nur-Ladeanimationen mit konischen Gradienten-Bögen.
Technical Guide
CSS conic-gradient() erstellt Farbübergänge um einen Mittelpunkt herum. Die Syntax lautet: conic-gradient(from Winkel bei posX posY, Farbe1, Farbe2, ..., Farbe1). Der "from"-Winkel dreht die Startposition (Standard 0deg = oben). Farben werden gleichmäßig über den 360°-Sweep verteilt, sofern keine expliziten Winkel-Stops angegeben sind. Wenn die erste Farbe als letzter Stop wiederholt wird, entsteht eine nahtlose Schleife. Für piechart-ähnliche Effekte können Sie Prozentsatz-Stops verwenden: conic-gradient(rot 0% 25%, blau 25% 50%, grün 50% 75%, gelb 75%). Konus-Verläufe werden in Chrome 69+, Firefox 83+, Safari 12.1+ und Edge 79+ unterstützt. Sie können mit border-radius: 50% maskiert und mit mask-image für komplexe Formen kombiniert werden.
Tips & Best Practices
-
1Wiederholen Sie die erste Farbe als letzten Stopp für nahtlose kreisförmige Übergänge
-
2Verwenden Sie harte Stops (gleicher Prozentsatz, zwei Farben) für Kreisdiagramm-Segmente
-
3Kombinieren Sie mit border-radius: 50% für kreisförmige Farbrad-Effekte
-
4Der "von"-Winkel rotiert den gesamten Gradienten - nützlich für animierte Effekte
-
5Schichten Sie mehrere konische Gradienten für komplexe Muster
Related Tools
Farbpicker
Interaktiver Farbpicker mit HEX-, RGB-, HSL- und CMYK-Ausgaben.
🎨 Color Tools
Farbharmonie-Rad
Interaktives Farbrad mit fünf Harmonietypen und visueller Auswahl.
🎨 Color Tools
Linearer Farbverlauf-Generator
Erstellen Sie CSS-lineare Farbverläufe mit benutzerdefinierten Farben, Winkel und Farbstops.
🎨 Color Tools
Radialer Verlaufsgenerator
Erstellen Sie CSS-Radialverläufe mit benutzerdefinierter Form, Position und Farben.
🎨 Color Tools
CSS-Filter-Generator
Wenden Sie CSS-Filtereffekte wie Unschärfe, Helligkeit, Kontrast und weitere mit visuellen Steuerelementen an.
🎨 CSS & DesignFrequently Asked Questions
Q Was ist ein konischer Gradient?
Q Kann ich Kreisdiagramme mit konischen Gradienten erstellen?
Q Wird conic-gradient gut unterstützt?
About This Tool
Konischer Verlaufs-Generator is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.