CSS Gradient Generator

So funktioniert es

1. Waehlen Sie den Gradienten-Typ — linear oder radial — und waehlen Sie Ihre Farben.
2. Passen Sie den Winkel mit dem Schieberegler an (nur linear) und sehen Sie die Vorschau in Echtzeit aktualisiert.
3. Kopieren Sie das CSS mit einem Klick und fuegen Sie es in Ihr Stylesheet ein.

Über dieses Tool

CSS-Gradienten sind die Hintergrundmuster des modernen Webs. Ein linearer Gradient mischt Farben entlang einer Linie in einem gewaehlten Winkel; ein radialer Gradient mischt sie von einem Mittelpunkt nach aussen. Beide werden in einer einzigen CSS-Eigenschaft deklariert, rendern in jeder Aufloesung ohne Bilddatei und kosten kein Netzwerkgewicht. Dieser Generator erstellt die Deklaration visuell.

Waehlen Sie zwei oder drei Farben, setzen Sie den Winkel fuer linear oder lassen Sie ihn fuer radial, und die Vorschau zeigt das Ergebnis. Die CSS-Zeile darunter ist bereit zum Kopieren — fuegen Sie sie als background-Eigenschaft ein und es funktioniert in jedem Browser der letzten zehn Jahre. Drei Farben erzeugen reichere Gradienten als zwei, und die mittlere Farbe ist die, die das Design ausmacht.

Das Tool laeuft in Ihrem Browser. Es gibt keinen Server-Aufruf, kein generiertes Bild, keine Datei zum Herunterladen. Was Sie in der Vorschau sehen, ist das, was der Browser aus dem CSS rendert, was bedeutet, dass das Ergebnis in der Produktion identisch sein wird.

Häufig gestellte Fragen