CSS-Gradient-Generator

Das Tool unterstützt lineare, radiale und konische Verläufe. Komplexere Mesh-Looks lassen sich nur angenähert darstellen, meist über mehrere kombinierte Verläufe. Für die meisten UI-Anwendungen reichen die unterstützten Typen gut aus.

Sie können den generierten Code in eine CSS-Klasse, ein Stylesheet oder bei Bedarf in ein Inline-Style übernehmen. In React oder Next.js ist meist eine Klasse oder Utility die sauberste Lösung, weil sich Verläufe so konsistent wiederverwenden lassen.

Ja. Lineare und radiale Verläufe sind seit Langem breit unterstützt, und auch konische Verläufe funktionieren in aktuellen Versionen der relevanten Browser. Für moderne Produkt- und Marketingseiten ist die Unterstützung in der Regel unkritisch.

Die Tailwind-Variante nutzt die üblichen Gradient-Utilities wie `bg-gradient-to-*`, `from-*`, `via-*` und `to-*`. Wenn exakte Farben nötig sind, verwendet das Tool auch Arbitrary Values. Bei sehr speziellen Konfigurationen zeigt es Grenzen an, wenn Utility-Klassen die Darstellung nicht exakt nachbilden können.

Prüfen Sie Kontrast nicht nur an einer Stelle, sondern über mehrere Bereiche des Verlaufs. Bei Bedarf helfen Overlays oder ein zusätzlicher dunkler beziehungsweise heller Verlauf darüber. Ziel ist, dass Text auch in ungünstigen Bereichen noch klar lesbar bleibt.

Normale statische Verläufe sind meist unkritisch. Aufwendiger wird es, wenn große Flächen oder viele Ebenen animiert werden. Für produktive Oberflächen sollten Animationen sparsam eingesetzt werden, besonders auf schwächeren Geräten.