Farben wählen. CSS kopieren. Fertig.
background: linear-gradient(135deg, #6366F1, #EC4899);GradientLab hilft dir, schöne CSS-Verläufe zu erstellen, ohne Code von Hand zu schreiben. Wähle zwei Farben, lege die Richtung fest und sieh dir sofort das Ergebnis an. Das Tool unterstützt sowohl lineare als auch radiale Verlaufstypen und lässt dich mit einem Klick zwischen ihnen wechseln. Wenn du mit dem Aussehen zufrieden bist, kopiere das produktionsreife CSS und füge es direkt in dein Stylesheet oder deine Tailwind-Konfiguration ein. Alles läuft lokal in deinem Browser, sodass deine Arbeit privat bleibt.
Ein linearer Verlauf wechselt zwischen Farben entlang einer geraden Linie in einem bestimmten Winkel, ideal für Hintergründe, Hero-Bereiche und Banner. Ein radialer Verlauf strahlt von einem Mittelpunkt nach außen, was gut für Spotlight-Effekte und kreisförmige UI-Elemente funktioniert. GradientLab lässt dich den Winkel für lineare Verläufe steuern und die radiale Option in Echtzeit vorschauen, damit du beide Stile vergleichen kannst, bevor du dich entscheidest.
Nicht sicher, wo du anfangen sollst? Durchstöbere 12 handverlesene Gradient-Vorlagen für modernes Webdesign oder drücke den Zufällig-Button, um unerwartete Farbkombinationen zu entdecken. Jede Vorlage ist vollständig bearbeitbar, sodass du sie als Ausgangspunkt nutzen und die Farben und den Winkel feinabstimmen kannst. Wenn du bereit bist, kopiert der Ein-Klick-Button die vollständige CSS-Regel in deine Zwischenablage, einschließlich der Fallback-Hintergrundfarbe für ältere Browser.
Musst du zuerst genaue Farben auswählen? Probiere den Farbwähler, um die perfekten HEX- oder RGB-Werte zu finden. Wenn dein Design fertig ist, rahme deine Screenshots mit dem Screenshot Mockup-Tool ein, um deinen Verlauf in einem eleganten Browser-Rahmen für Portfolios und Social Media zu präsentieren.
Generate a matching favicon using the favicon generator or optimize your exported images with the image compressor.