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

CSS-Radialgradientengenerator

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 geöffnet, wobei der Radialtyp bereits ausgewählt ist: Die Farben strahlen in konzentrischen Kreisen von der Mitte des Elements nach außen, und bei jedem von Ihnen geänderten Stopp wird die Vorschau sofort neu gezeichnet.

radial-gradient() ist das Werkzeug für Spotlight- und Glow-Effekte, weiche Vignetten und Hintergründe, die einen Fokuspunkt statt einer Richtung benötigen. Die Stopppositionen in Prozent entsprechen dem Abstand von der Mitte – 0 % ist die Mitte, 100 % der äußerste Rand – wenn man also die ersten Stopps festzieht, entsteht ein kleiner heller Kern, wenn man sie ausdehnt, entsteht ein breiter Wascheffekt.

Kopieren Sie die Hintergrundlinie, sobald die Vorschau richtig aussieht. Der Winkelschieberegler ist in diesem Modus ausgeblendet, da ein Kreis keine Richtung hat. Wechseln Sie zurück zu linear oder konisch, und er wird wieder angezeigt.

🛡️
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.