CSS-Farbverläufe
Fertige Verläufe, warm, kühl, pastell, kräftig oder dunkel: CSS-Code kopieren oder im Verlaufsgenerator öffnen.
Von KSPNAI erstellte Sammlungen, frei verwendbar.
Über dieses Tool
Diese Sammlung bietet 70 fertige CSS-Farbverläufe, von KSPNAI erstellt und frei verwendbar. Es sind lineare Verläufe mit zwei oder drei Farben, sortiert in sieben Themen: warm, kühl, pastell, kräftig, dunkel, Natur und Sonnenuntergang. Sie eignen sich als Website-Hintergrund, für ein Banner, eine Schaltfläche oder ein Bild für soziale Netzwerke.
Jeder Verlauf zeigt eine Vorschau und seine HEX-Codes. Ein Klick auf CSS kopieren legt eine Zeile background: linear-gradient(…) in die Zwischenablage, die Sie direkt in Ihr Stylesheet einfügen. Um Winkel oder Farben zu ändern oder ein Bild zu exportieren, klicken Sie auf Bearbeiten: Seine Farben öffnen sich im Verlaufsgenerator. Das gewählte Thema bleibt in der Seitenadresse erhalten.
- 70 lineare Verläufe mit 2 oder 3 Farben
- 7 Themen, von warm bis dunkel
- CSS-Code mit einem Klick kopieren
- HEX-Code jeder Farbe sichtbar
- Bearbeitung im Verlaufsgenerator
So funktioniert es
- Wählen Sie ein Thema in den Filtern oder bleiben Sie bei Alle.
- Suchen Sie einen Verlauf anhand der Vorschau aus.
- Klicken Sie auf CSS kopieren und fügen Sie den Code in Ihr Stylesheet ein.
- Klicken Sie auf Bearbeiten, um ihn im Verlaufsgenerator anzupassen.
Häufige Fragen
Welcher Code wird genau kopiert?
Eine vollständige CSS-Deklaration, zum Beispiel background: linear-gradient(135deg, #c87023 0%, #30b075 100%); die Sie unverändert in eine CSS-Regel einfügen können.
Darf ich die Verläufe frei verwenden?
Ja, es sind von KSPNAI erstellte Sammlungen, frei verwendbar für Website, App oder Grafik.
Ist das Tool kostenlos?
Ja, kostenlos und ohne Konto. Die Verläufe sind Teil der Seite: Nichts wird übertragen, kopiert wird in Ihre Zwischenablage.
Wie erhalte ich den Verlauf als PNG-Bild?
Klicken Sie auf Bearbeiten: Seine Farben öffnen sich im Verlaufsgenerator. Dort stellen Sie Winkel und Verlaufsart ein und laden anschließend ein PNG-Bild herunter.