Radial-Gradient-Generator
Kreisförmige und elliptische CSS-Radialverläufe in Echtzeit gestalten
Mit diesem Tool erstellen Sie kreisförmige oder elliptische Radialverläufe und sehen jede Änderung an Farbstopps (bis zu fünf), Startposition und Form sofort in der Vorschau. Gedacht für Designerinnen und Frontend-Entwickler, die CSS-Code für Hintergründe, Buttons oder Card-Layouts brauchen. Alles wird unmittelbar im Browser berechnet – es werden keinerlei Daten an einen Server gesendet.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Wählen Sie als Form entweder Kreis oder Ellipse
- Klicken Sie im 3x3-Positionsraster den Ausgangspunkt des Verlaufs an
- Stellen Sie Farbe und Position (%) der Farbstopps ein und fügen Sie bei Bedarf Stopps hinzu oder entfernen Sie welche
- Prüfen Sie das Ergebnis in der Vorschau und kopieren Sie den erzeugten CSS-Code
FAQ
- Wie viele Farbstopps kann ich hinzufügen?
- Zwischen zwei und maximal fünf Farbstopps. Farbe und Position lassen sich für jeden Stopp einzeln einstellen.
- Wie verwende ich den erzeugten CSS-Code?
- Über die Schaltfläche zum Kopieren erhalten Sie fertigen radial-gradient-CSS-Code, den Sie direkt als Wert der background-Eigenschaft einfügen können.
- Wie lege ich die Position fest?
- Im 3x3-Raster klicken Sie eine der neun Schlüsselwortpositionen an – etwa top left, center oder bottom right.