CSS-Gradient Generator — Verläufe kostenlos online erstellen
Farbverläufe verleihen Webdesigns Tiefe, Dynamik und eine moderne Ästhetik. Mit dem WikiPlus CSS-Gradient Generator lassen sich lineare und radiale Verläufe in Echtzeit gestalten und sofort als fertiger CSS-Code exportieren. Kein Photoshop, kein kompliziertes Manualcoding — einfach Farben wählen, Richtung anpassen und den Code in das Stylesheet einfügen. Kostenlos, direkt im Browser und ohne Registrierung.
CSS-Gradients: Lineare vs. Radiale Verläufe
CSS unterstützt mehrere Arten von Farbverläufen. Der lineare Verlauf (linear-gradient) ist der häufigste: Farben wechseln entlang einer geraden Linie. Die Richtung kann als Winkel (0deg = nach oben, 90deg = nach rechts) oder als Schlüsselwort (to right, to bottom right) angegeben werden. Syntax: background: linear-gradient(45deg, #0011ff, #00ff99). Der radiale Verlauf (radial-gradient) strahlt von einem Mittelpunkt nach außen: background: radial-gradient(circle, #0011ff, #00ff99). Dabei kann man Form (circle oder ellipse), Größe und Position des Mittelpunkts bestimmen. Seit CSS4 gibt es auch conic-gradient (kegelförmig), das sich für Tortengrafiken und kreisförmige Fortschrittsanzeigen eignet. Der WikiPlus Gradient Generator unterstützt lineare und radiale Verläufe mit Live-Vorschau.
Mehrere Farbstopps: Komplexe Verläufe erstellen
Ein CSS-Gradient muss nicht auf zwei Farben beschränkt sein. Mit mehreren Farbstopps lassen sich komplexe, vielschichtige Verläufe erstellen. Syntax: background: linear-gradient(to right, #ff0000 0%, #ff7700 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). Die Prozentzahlen (oder absoluten Längenangaben wie 100px) definieren, wo ein Farbstopp liegt. Ohne explizite Position verteilt der Browser die Stopps gleichmäßig. Besonders interessante Effekte entstehen durch harte Kanten statt Übergänge: Wenn zwei benachbarte Stopps dieselbe Position haben, gibt es einen abrupten Farbwechsel statt eines Übergangs — background: linear-gradient(to right, red 50%, blue 50%) erzeugt eine harte Trennlinie in der Mitte. Damit lassen sich Streifenmuster und andere geometrische Effekte rein mit CSS erstellen.
Gradient-Trends im modernen Webdesign
Farbverläufe haben eine Designrenaissae erlebt. Während die Flat-Design-Ära Verläufe weitgehend verbannte, sind sie seit ca. 2017 wieder allgegenwärtig — allerdings in modernerer Form. Mehrdimensionale Mesh-Gradienten: Komplexe, fast fotorealistische Hintergründe mit mehreren Lichtquellen und Farbübergängen in mehrere Richtungen. Duotone-Verläufe: Schwarzweiß-Foto mit einem zweifarbigen Verlauf überlagert — weit verbreitet bei Portfolios und Kreativ-Agenturen. Glas-Morphismus: Halbtransparente, verschwommene Flächen mit subtilen Verlaufshintergründen, oft kombiniert mit backdrop-filter: blur(). Aurora-Hintergründe: Weiche, organische Verläufe in Pastell- oder Neonfarben, die an Nordlichter erinnern. All diese Trends lassen sich mit CSS-Gradients umsetzen, wobei der WikiPlus Generator für den Einstieg und schnelle Prototypen ideal ist.
CSS-Gradients für Performance optimieren
CSS-Gradients sind deutlich performanter als Hintergrundbilder, weil sie vom Browser nativ gerendert werden und keine Netzwerkanfragen erzeugen. Trotzdem gibt es einige Best Practices. Gradient-Wiederholung mit repeating-linear-gradient: Statt viele Farbstopps zu definieren, kann man ein Muster einmal definieren und es wiederholen lassen. CSS-Gradient als Fallback: Wenn ein Gradient für breitere Browserkompatibilität oder als Fallback verwendet wird, sollte eine Solid-Farbe als erstes background angegeben werden: background: #0011ff; background: linear-gradient(to right, #0011ff, #00ccff). Gradient-Animationen sparsam einsetzen: Animierte Verläufe (über background-size oder Farbwechsel in @keyframes) können auf mobilen Geräten die Akku-Laufzeit beeinträchtigen. Prefix-Pflicht: In sehr alten Codebasen sind -webkit-linear-gradient und -moz-linear-gradient Prefixe zu finden, die heute nicht mehr nötig sind.
Häufig gestellte Fragen
- Wie erstelle ich einen transparenten CSS-Gradient?
- Verwende rgba() oder hsla() mit Alpha-Wert 0 für Transparenz: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)). Der erste Wert ist undurchsichtiges Schwarz, der zweite vollständig transparent — ideal für Text-Overlay-Effekte auf Bildern.
- Kann ich CSS-Gradients als Hintergrund für Text oder Borders verwenden?
- Ja. Für Gradient-Text: background: linear-gradient(to right, #0011ff, #00ccff); -webkit-background-clip: text; -webkit-text-fill-color: transparent. Für Gradient-Borders ist ein Trick mit border-image oder Pseudo-Elementen nötig, da border-color keine Gradient-Syntax direkt unterstützt.
- Wie importiere ich den generierten CSS-Code aus dem WikiPlus Tool?
- Nach dem Erstellen des Verlaufs zeigt das Tool den fertigen CSS-Code an, der per Kopieren-Button in die Zwischenablage übertragen werden kann. Einfach in das Stylesheet einfügen und die Farben oder das Element nach Bedarf anpassen.