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

Sunset CSS Gradient – Fertiger 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 einer vorgefertigten Sonnenuntergangsüberblendung geöffnet: warme Koralle #ff7e5f, die in weichen Pfirsich #feb47b übergeht, von links nach rechts. Die Vorschau zeigt es sofort in voller Breite und die CSS-Zeile darunter kann unverändert kopiert werden.

Warme Koralle-zu-Pfirsich-Überblendungen sind ein Grundbestandteil der Heldensektion, da sie freundlich und energisch wirken, ohne den weißen Text zu überfordern. Dieses Paar liegt im Farbton so nah beieinander, dass der Mittelpunkt sauber bleibt – kein schlammiges graues Band in der Mitte, die übliche Fehlerart von Farbverläufen zwischen entfernten Farben.

Verwenden Sie es unverändert oder machen Sie es zu Ihrem eigenen: Drehen Sie den Winkel für einen diagonalen Sonnenuntergang, ziehen Sie die erste Blende nach innen, um eine stärkere Korallenpräsenz zu erzielen, oder fügen Sie eine dritte Blende mit einem tiefen Pflaumenton nahe 100 % hinzu, um ein Dämmerungsgefühl zu erzeugen. Bei jeder Änderung wird das kopierbare CSS sofort aktualisiert.

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