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

Pastellfarbener CSS-Verlauf – vorgefertigter Code

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 mit einem vorgefertigten Pastell-Fade geöffnet: Puderrosa #ffdde1, das in staubiges Rosa #ee9ca7 übergeht. Das Vorschaufenster zeigt sofort das weiche Ergebnis, darunter steht die CSS-Zeile bereit.

Pastellverläufe funktionieren dort, wo gesättigte Farbverläufe schreien würden: Onboarding-Bildschirme, Karten, leere Zustände und Beauty- oder Lifestyle-Branding. Da beide Blenden hell sind, bleibt dunkler Text auf der gesamten Oberfläche lesbar – etwas, das die meisten lebendigen Farbverläufe ohne eine Überlagerung nicht bieten können.

Kopieren Sie die Linie so, wie sie ist, oder machen Sie sie noch weicher, indem Sie an die Deckkraft angrenzende Tricks verschieben: Stellen Sie den Rosenstopp auf 80 % und lassen Sie das Rosa dominieren, oder wechseln Sie zu einem radialen Typ, um einen sanften Glanz in der Mitte zu erzielen. Das Tool aktualisiert das kopierbare CSS bei jeder Eingabe.

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