Farbverlauf Generator
Erstelle schöne CSS-Farbverläufe visuell. Perfekt für Hintergründe, Buttons und modernes Webdesign.
Vorschau
Verlauf-Einstellungen
Farbstopps
Vanilla CSS
Vorlagen
Der generierte CSS-Code kann direkt in deinen Stylesheets verwendet werden. Für beste Browser-Kompatibilität solltest du Vendor-Präfixe oder einen CSS-Präprozessor verwenden.
Unterstützt von APImage
Die AI-API für Bilder. Generiere, bearbeite und verbessere Bilder im Handumdrehen.
Mehr erfahren
Atemberaubende Farbverläufe erstellen
CSS-Farbverläufe ermöglichen es dir, sanfte Übergänge zwischen zwei oder mehr Farben anzuzeigen. Sie sind perfekt für die Erstellung moderner, auffälliger Designs ohne Bilddateien.
Verlaufstypen
- Lineare Verläufe: Farben gehen in einer geraden Linie in einem bestimmten Winkel über. Perfekt für Hintergründe, Hero-Bereiche und Karten-Designs. Du kannst die Richtung mit Winkeln (0-360°) steuern.
- Radiale Verläufe: Farben strahlen von einem Mittelpunkt nach außen in einem kreisförmigen Muster. Ideal für Spotlight-Effekte, Buttons und dekorative Elemente.
Farbstopps
Farbstopps definieren, wo jede Farbe in deinem Farbverlauf beginnt und endet. Du kannst mehrere Stopps hinzufügen, um komplexe Mehrfarben-Verläufe zu erstellen. Positionswerte reichen von 0% (Start) bis 100% (Ende).
Best Practices
- Verwende 2-3 Farben für sauberere, professionellere Verläufe
- Stelle ausreichenden Kontrast für Textlesbarkeit sicher
- Teste Verläufe sowohl im hellen als auch im dunklen Modus
- Erwäge die Verwendung von CSS-Variablen für einfaches Theming
- Verwende Verläufe sparsam für maximale Wirkung