🌈 Ein Toolkit,
jede Designaufgabe

Verlaufsgenerator

Entwerfen Sie wunderschöne lineare und radiale Verläufe mit der Canvas-Vorschau in Echtzeit. CSS-Code sofort kopieren.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

🌈 Verlaufsgenerator

Leitfaden zum Gradientengenerator

Ein Farbverlauf ist ein sanfter Übergang zwischen zwei oder mehr Farben. Farbverläufe verleihen Webdesigns, UI-Elementen und Illustrationen Tiefe, Dimension und visuelles Interesse.

Wählen Sie zwei Farben aus, wählen Sie einen Verlaufswinkel und sehen Sie das Ergebnis sofort auf der Leinwand. Kopieren Sie den CSS-Code zur Verwendung in Ihrem Projekt.

Pro Tips

Frequently Asked Questions

Q: Was ist der Unterschied zwischen linearen und radialen Gradienten?
Was ist der Unterschied zwischen linearen und radialen Gradienten? Lineare Farbverläufe verlaufen entlang einer geraden Linie, während radiale Farbverläufe strahlenförmig von einem zentralen Punkt ausgehen.
Q: Kann ich Farbverläufe in CSS verwenden?
Kann ich Farbverläufe in CSS verwenden? Ja, verwenden Sie die Eigenschaft „Hintergrundbild“ mit den Funktionen „Linear-Gradient“ oder „Radial-Gradient“.
Q: Kann ich transparente Farbverläufe erstellen?
Kann ich transparente Farbverläufe erstellen? Ja, verwenden Sie den Deckkraft-Schieberegler oder bearbeiten Sie das kopierte CSS manuell, um die Farbwerte rgba() oder hsla() zu verwenden. Farbverläufe mit Transparenz eignen sich hervorragend für Überlagerungen und Glaseffekte.
Q: Wie mache ich den Farbverlauf reaktionsfähig?
Wie mache ich den Farbverlauf reaktionsfähig? Das generierte CSS funktioniert bei jeder Containergröße. Wenden Sie bei Vollbildverläufen den Verlauf auf den Körper oder ein Wrapper-Element an. Verwenden Sie „background-size:cover“, um optimale Ergebnisse zu erzielen.
Q: Was ist der Unterschied zwischen linearen und radialen Gradienten?
Was ist der Unterschied zwischen linearen und radialen Gradienten? Lineare Farbverläufe verlaufen entlang einer geraden Linie, perfekt für Kopfzeilen und Banner. Radiale Farbverläufe gehen von einem Mittelpunkt aus, ideal für Spotlight-Effekte und kreisförmige Elemente.

Bauhaus-Farben

Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.

Bauhaus Rot #BE1E2D

Das ikonische Rot der Bauhaus-Plakate und Drucksachen

Bauhaus Gelb #FFDE17

Das leuchtende Gelb der Bauhaus-Ästhetik

Bauhaus Blau #00509E

Das tiefe Blau des Bauhaus-Farbkreises

Ultramarin #120A8F

Historisches Pigment aus Lapislazuli, von Goethe beschrieben

Ocker #C78B2C

Erdpigment der deutschen Renaissance-Malerei

Petrol #006D7C

Das Blaugrün der Nachkriegszeit und des Mid-Century-Designs

Lindgrün #7CBA3D

Das frische Grün der Frühlingslinden

Ziegelrot #B22222

Die roten Ziegeldächer der Altstädte

Graphit #38383A

Der dunkle Grauton der Zeichenkunst und des Industriedesigns

Weiß #F4F4F4

Das Weiß der Bauhaus-Wände — Raum und Licht

Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.