# CSS-Farbverlaufs-Mesh-Generator (konisch + radial) Erzeugt das seit 2024 auf Dribbble/Behance populäre „Gradient-Mesh“: mehrere radiale Verläufe (Farbfleck → Ausblendung in transparent derselben Farbe) über einer Basiskolorit (optional eine konische Schicht), mit Mischmodi, SVG-Filmkorn, geseedeten Layouts (Ecken / Ring / Streuung / Raster), Live-Vorschau, kopierbarem CSS und Tailwind-Willkürklasse. Flecken blenden über 8-stelliges Hex #RRGGBB00 aus — ohne den grauen Ring des transparent-Schlüsselworts. > Kanonische Seite: https://elysiatools.com/de/tools/css-gradient-mesh-generator - **Kategorie:** Design - **Schlagwörter:** css verlaufsmesh, konischer verlauf, radiale ebenen, aurora-hintergrund, tailwind verlauf ## Überblick Kernsyntax (MDN): Beim mehrschichtigen background-image liegt die erste Schicht oben; eine radiale Schicht lautet radial-gradient(circle at x% y%, #farbe 0%, #farbe00 60%) — transparenter Stopp bei 35–50 % = harte Flecken, 50–70 % = klassisches Mesh (Standard 60 %), 80–100 % = weiche Wäsche; die Grundfarbe steht in background-color. Die konische Schicht conic-gradient(from Xdeg at 50% 50%, …) liefert Aurora-artige Winkelvariation. Die background-blend-mode-Liste entspricht der Schichtreihenfolge (normal Stapel / multiply Tinte / screen Leuchten / overlay gesättigte Mitten / soft-light sanfte Aurora / hue / difference psychedelisch). Filmkorn = inline feTurbulence-SVG-Data-URI bei niedriger Deckkraft + mix-blend-mode: overlay. Layouts steuert ein mulberry32-Seed: gleicher Seed, gleiches Mesh. Der Tailwind-Export ist ein einzelner beliebiger Wert (Leerzeichen → Unterstriche): bg-[radial-gradient(circle_at_20%_25%,_#7c3aed_0%,_#7c3aed00_60%),…] + bg-[#basis]. ## Eingaben - **Paletten-Preset** (select) - **Eigene Farbe 1** (color) - **Eigene Farbe 2** (color) - **Eigene Farbe 3** (color) - **Eigene Farbe 4** (color) - **Anzahl der Farbflecken** (number) - **Fleck-Layout** (select) - **Zufalls-Seed** (number) - **Verlauf (transparenter Stopp %)** (number) - **Mischmodus** (select) - **Konische Basis hinzufügen** (checkbox) - **Konischer Startwinkel (Grad)** (number) - **Filmkorn hinzufügen** (checkbox) ## Wann verwenden - Wenn für Hero-Sektionen, Landingpages oder App-Dashboards moderne Mesh- oder Aurora-Hintergründe benötigt werden. - Wenn komplexe Hintergrundgrafiken durch performantes, reines CSS ohne schwere Bilddateien ersetzt werden sollen. - Wenn passgenaue Tailwind-CSS-Klassen für mehrschichtige Verläufe mit Alphakanal-Transparenzen generiert werden müssen. ## Funktionsweise - Wählen Sie ein Farb-Preset oder definieren Sie bis zu vier individuelle Hex-Farben für die Verlaufsflecken. - Passen Sie Fleckanzahl, Layout-Typ (Ecken, Ring, Streuung, Raster), Zufalls-Seed, Kantenabfall und Mischmodus in den Optionen an. - Aktivieren Sie optional eine konische Basisschicht für dynamische Winkelverläufe oder ein feTurbulence-SVG-Filmkorn für haptische Tiefe. - Kopieren Sie den fertigen Standard-CSS-Codeblock oder die formatierte Tailwind-Willkürklasse direkt in Ihre Projektdateien. ## Anwendungsfälle - Gestaltung von responsiven Hero-Headern und Call-to-Action-Bannern für SaaS-Landingpages. - Erstellung von dynamischen Aurora- und Glaseffekt-Kartenhintergründen in Benutzeroberflächen. - Design von stimmungsvollen Dark-Mode-Akzenten für Produktpräsentationen und Portfolios. ## Häufig gestellte Fragen ### Warum nutzt der Generator 8-stellige Hex-Farben statt des Schlüsselworts transparent? Das CSS-Schlüsselwort transparent interpoliert technisch zu transparentem Schwarz (rgba(0,0,0,0)), was bei Verläufen oft zu schmutzigen Graurändern führt. 8-stelliges Hex (#RRGGBB00) behält den Farbton bei und blendet sauber aus. ### Was bewirkt der Zufalls-Seed bei den Layouts? Der Seed steuert die deterministische Berechnung der Koordinaten über einen Mulberry32-Algorithmus. Dieselbe Seed-Zahl liefert immer exakt dieselbe Positionierung der radialen Flecken. ### Wie wird das Filmkorn technisch im CSS umgesetzt? Das Korn wird als eingebettete SVG-Data-URI mit einem feTurbulence-Filter über ein Pseudo-Element erzeugt und per Overlay-Mischmodus mit geringer Deckkraft über den Verlauf gelegt. ### Welche Mischmodi eignen sich am besten für dunkle Hintergründe? Die Modi 'screen' und 'overlay' eignen sich besonders gut für dunkle Hintergründe, da sie leuchtende Überlagerungen erzeugen, während 'multiply' auf hellen Basisfarben intensivere Farbmischungen liefert. ### Wie wird der Verlauf in Tailwind CSS integriert? Der Generator fasst alle Schichten in einer einzelnen Tailwind-Willkürklasse wie bg-[radial-gradient(...)] zusammen, wobei Leerzeichen durch Unterstriche ersetzt werden. ## Ähnliche Tools - [SVG-Sprite-Sheet-Generator](https://elysiatools.com/de/tools/svg-sprite-generator): Lade bis zu 30 SVG-Icons hoch und füge sie zu einem Sprite-Sheet zusammen: \-Modus für inline , \-Modus für externe Datei-Fragmente. Ergänzt viewBox (aus width/height), dedupliziert Icons, entfernt optional fill/stroke für currentColor, säubert immer und on\*-Attribute und erzeugt HTML-/React-/Vue-/CSS-Snippets mit Live-Vorschau jedes Icons. - [Glassmorphism-/Neumorphism-CSS-Snippet-Generator](https://elysiatools.com/de/tools/glassmorphism-css-snippet-builder): Erzeugt den vollständigen Glassmorphism- oder Neumorphism-CSS-Snippet von Anfang bis Ende: Blur, Sättigung, Tönungsdeckkraft, Radius, Rahmen, Außenschatten und Oberkanten-Highlight; optional SVG-feTurbulence-Korn und @supports-Fallback; automatisch mit -webkit-backdrop-filter-Präfix (vor Safari 18 nötig) und Tailwind-Klassen-Mapping (mit v3/v4-Hinweis), plus Live-Vorschau der Karte auf Gradient-Hintergrund. - [SVG-Favicon-Generator](https://elysiatools.com/de/tools/svg-favicon-generator): Erzeugt aus einem SVG- oder Rasterlogo ein komplettes Favicon-Paket mit ICO, PNG-Varianten, Apple-Touch-Icon und Web-Manifest - [Diagonales Wasserzeichen-Tool](https://elysiatools.com/de/tools/image-watermark-diagonal): Fügen Sie diagonale Wasserzeichen zu Bildern mit anpassbarem Winkel, Größe, Transparenz und Positionierung entlang der Diagonalen hinzu - [Wasserzeichen-Mosaik-Tool](https://elysiatools.com/de/tools/image-watermark-tile): Fügen Sie Mosaik-Wasserzeichen zu Bildern mit anpassbarer Größe, Transparenz, Abstand und Mustern hinzu - [Data-URI-Generator](https://elysiatools.com/de/tools/data-uri-generator): Konvertiert Dateien in Data URIs (Base64 oder prozent-kodiert), um Bilder, Schriftarten und Ressourcen direkt in HTML, CSS oder Markdown einzubetten - [Biomassepyramide und Energiefluss (10%-Regel)](https://elysiatools.com/de/tools/biomass-pyramid): Erzeugt eine Nahrungspyramide nach dem Lindeman-Gesetz: Geben Sie die Energie/Biomasse der Produzenten E₁, die Transfereffizienz (Standard 10%, Bereich 0.1–40%) und die Zahl der Ebenen (3–6) ein. Sie erhalten Energie/Biomasse je Ebene, den Prozentsatz der Produzenten und die Verluste bei jedem Transfer (Atmung, Egestion, Nicht-Prädation). Rendert eine farbige SVG-Pyramide (Breiten im √E-Maßstab zur Sichtbarkeit; die Zahlen sind immer echt) und eine Tabelle je Ebene und erklärt, warum Energiepyramiden immer aufrecht sind, während Zahlen-/Biomassepyramiden invertiert sein können (z. B. marine Ökosysteme). Typische gemessene Effizienzen: 5–20%. - [Chinesischer Strichfolge-Zerleger](https://elysiatools.com/de/tools/chinese-stroke-order-decomposition): Zerlegt ein chinesisches Zeichen in seine Strichfolge und Radikalstruktur und rendert eine SVG-Strichfolge-Demonstration mit Komponentenfärbung. ## Beispiele - [SVG Beispiele](https://elysiatools.com/de/samples/svg-samples): Beispiele für skalierbare Vektorgrafiken (SVG), die verschiedene SVG-Funktionen und -Techniken demonstrieren - [Tailwind CSS Samples](https://elysiatools.com/de/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations - [Web Python Bildverarbeitung Beispiele](https://elysiatools.com/de/samples/web-image-processing-python): Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung - [Bulma CSS Framework Beispiele](https://elysiatools.com/de/samples/bulma): Bulma CSS-Framework-Beispiele einschließlich Spalten, Komponenten, Formular-Steuerelemente, Layout-System und moderne CSS-basierte Design-Muster ## Verwandte Inhalte - [SVG-, Favicon- und Icon-Workflow-Tools](https://elysiatools.com/de/hubs/svg-favicon-icon-workflows): Erstellen Sie Favicon-Pakete, optimieren Sie SVGs, konvertieren Sie Icons zwischen ICO, PNG, JPG, WebP und SVG und bereiten Sie webfertige Assets in einem Hub vor. - [Tools fur Audio-Encoding und Formatkonvertierung](https://elysiatools.com/de/hubs/audio-convert): Vergleiche Audioformat-Konvertierung, Bitratenanderungen, Abtastraten-Konvertierung, Codec-Wechsel und Export-Tools in einem Hub. - [Tools fur Bildformat-Konvertierung und animierten Export](https://elysiatools.com/de/hubs/image-convert): Vergleiche Bildkonverter fur JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 und animationsgeeignete Exporte in einem Hub. - [Tools fur JSON-Austausch und Format-Ubersetzung](https://elysiatools.com/de/hubs/json-convert): Vergleiche JSON-Konvertierungswerkzeuge fur CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN und ahnliche strukturierte Formate in einem Hub.