Skip to main content

CSS Konischer Verlaufs-Generator Erstellen Sie CSS-Konische Verläufe für Kreisdiagramme, Farbräder und Sweep-Effekte.

Konischer Verlaufs-Generator illustration
🎨

Konischer Verlaufs-Generator

Erstellen Sie CSS-Konische Verläufe für Kreisdiagramme, Farbräder und Sweep-Effekte.

1

Farben auswählen

Wählen Sie drei Farben für den konischen Sweep.

2

Einstellungen anpassen

Setzen Sie den Startwinkel und die Mittelposition.

3

CSS kopieren

Kopieren Sie den generierten conic-gradient CSS-Code.

Loading tool...

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

  • 1
    Wiederholen Sie die erste Farbe als letzten Stopp für nahtlose kreisförmige Übergänge
  • 2
    Verwenden Sie harte Stops (gleicher Prozentsatz, zwei Farben) für Kreisdiagramm-Segmente
  • 3
    Kombinieren Sie mit border-radius: 50% für kreisförmige Farbrad-Effekte
  • 4
    Der "von"-Winkel rotiert den gesamten Gradienten - nützlich für animierte Effekte
  • 5
    Schichten Sie mehrere konische Gradienten für komplexe Muster

Related Tools

Frequently Asked Questions

Q Was ist ein konischer Gradient?
Ein konischer Gradient wechselt zwischen Farben um einen Mittelpunkt herum, indem er sich winkelförmig wie eine Uhrhand bewegt. Er unterscheidet sich von linearen (geraden Linien) und radialen (von der Mitte nach außen) Gradienten.
Q Kann ich Kreisdiagramme mit konischen Gradienten erstellen?
Ja! Verwenden Sie harte Farbstops (zwei Farben bei demselben Prozentsatz), um scharfe Segmente zu erstellen. Zum Beispiel: conic-gradient(rot 0% 30%, blau 30% 70%, grün 70%).
Q Wird conic-gradient gut unterstützt?
Es wird in allen modernen Browsern wie Chrome, Firefox, Safari und Edge unterstützt. Es ist ein CSS Images Level 4-Feature mit breiter Akzeptanz seit 2020.

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.