Farbverläufe visuell gestalten
Mit dem CSS Gradient Generator von ToolMole kannst du komplexe Farbverläufe für Webseiten einfach per Drag & Drop zusammenstellen. Du wählst zwischen linearen, radialen und conischen Verläufen, setzt individuelle Farbstopps und bestimmst deren Positionen sowie den Winkel des Gradients. Alle Anpassungen werden sofort in der Vorschau sichtbar.
Durch die intuitive Bedienung siehst du direkt, wie dein Verlauf mit verschiedenen Einstellungen aussieht. Die Farbstopps können beliebig hinzugefügt und verschoben werden, um Streifen, harte Kanten oder sanfte Übergänge zu erzeugen.
CSS-Code direkt generieren und kopieren
Das Tool erstellt den passenden CSS-Code mit den Standardfunktionen linear-gradient, radial-gradient und conic-gradient. Du kannst den Code mit einem Klick in die Zwischenablage kopieren und sofort in dein Stylesheet einfügen.
Alle Berechnungen und die Vorschau laufen komplett im Browser. Es werden keine Daten auf einen Server übertragen, sodass du den Generator auch für sensible Projekte nutzen kannst.
Grenzen und Besonderheiten der Darstellung
Das Tool unterstützt ausschließlich die sRGB-Farbinterpolation, wie sie von aktuellen Browsern verarbeitet wird. Daraus können – insbesondere bei vielen Farbstopps – unerwartete Übergänge entstehen. Transparenz und Alpha-Werte sind ebenfalls möglich, um Verläufe mit Durchsichtigkeit zu gestalten.
Conic-Gradients werden nicht von allen älteren Browsern korrekt dargestellt. Die erzeugten Verläufe können ausschließlich als CSS-Code exportiert werden, nicht als Bilddatei. Für spezielle Effekte wie harte Kanten empfiehlt es sich, Farbstopps mit identischer Position zu setzen.
Häufig gestellte Fragen
Kann ich den generierten CSS-Code in allen Browsern verwenden?
Lineare und radiale Farbverläufe funktionieren in allen modernen Browsern. Conic-Gradiants werden jedoch nicht von älteren Browsern wie Internet Explorer unterstützt. Die Vorschau zeigt exakt, wie es im aktuellen Browser aussehen wird.
Wie erstelle ich einen harten Übergang oder Streifen im Verlauf?
Setze zwei Farbstopps mit identischer Position und unterschiedlichen Farben. Dadurch entsteht eine scharfe Kante ohne weichen Übergang, wie sie für Streifen häufig benötigt wird.
Unterstützt das Tool Transparenz und Alpha-Kanäle?
Ja, du kannst Farben mit Transparenz wählen, beispielsweise RGBA oder Hex mit Alpha. So lassen sich Gradients erzeugen, die zum Hintergrund durchscheinen.
Was passiert, wenn ich mehrere Stopps an derselben Position setze?
Das führt zu einem abrupten Wechsel zwischen den Farben. Das ist nützlich für harte Ränder oder mehrere Streifen im Verlauf.
Kann ich den Verlauf auf verschiedenen Hintergründen testen?
Du kannst im Tool unterschiedliche Hintergrundfarben einstellen, um zu sehen, wie der Gradient auf verschiedenen Flächen wirkt.
Gibt es eine Möglichkeit, Gradients zu randomisieren oder Presets zu laden?
Das Tool bietet eine Zufallsfunktion, mit der du zufällige Gradients erzeugen kannst. Vorgefertigte Presets sind derzeit nicht enthalten.
Probleme oder Ideen zu diesem Werkzeug? Mitteilung senden