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.

Elysia Tools

Mobile Navigation

Design

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.

Einzelheiten

Wobei dieses Tool hilft

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(circleat20%25%,#7c3aed0%,#7c3aed00_60%),…] + bg-[#basis].

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

2 Beispiele

Cosmic-Hero-Hintergrund — das Standard-Mesh

Vier Flecken (violett, pink, cyan, minze) in den Ecken auf fast schwarzem Grund, 60 % Verlauf, normale Mischung — der Signatur-Look im conic.style-Stil, direkt einfügbar.

<section class="cgm">300px live mesh preview · .gradient-mesh CSS block with 4 radial layers · Tailwind bg-[…] class · layer chips + palette</section>

Glutglühen — Streuung, konische Basis, Korn und Screen-Mischung

Die Ember-Palette ab Seed 777 über dem fast schwarzen Grund gestreut, mit konischer Basis ab 45°, Screen-Mischung für leuchtende Überlappungen und Filmkorn — der komplette Finish-Stack in einem Preset; der Hinweis warnt vor der umgekehrten Kombination (helle Basis + screen).

<section class="cgm">ember scatter mesh preview glowing over #1c0a0a · 5 radial layers + conic underlay = 6 layers · grain ::after pseudo-element in the CSS · Tailwind class</section>

Eingaben

Optionen sind gruppiert, damit lange Formulare übersichtlich bleiben.

13 Optionen

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.11

Paletten-PresetselectOptionales FeldEigene Farbe 1colorOptionales FeldEigene Farbe 2colorOptionales FeldEigene Farbe 3colorOptionales FeldEigene Farbe 4colorOptionales FeldAnzahl der FarbfleckennumberOptionales FeldFleck-LayoutselectOptionales FeldZufalls-SeednumberOptionales FeldVerlauf (transparenter Stopp %)numberOptionales FeldMischmodusselectOptionales FeldKonischer Startwinkel (Grad)numberOptionales Feld

SchalterOptionales Verhalten aktivieren oder deaktivieren.2

Konische Basis hinzufügencheckboxOptionales FeldAktiviert, wenn ausgewähltFilmkorn hinzufügencheckboxOptionales FeldAktiviert, wenn ausgewählt

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Beispiele

Beispiele zu diesem Tool

Verwandt

CSS-Farbverlaufs-Mesh-Generator (konisch + radial)

Wobei dieses Tool hilft

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. Cosmic-Mesh für eine SaaS-Hero-Section

2. Glühender Dark-Mode-Kartenhintergrund

FAQ

SVG Beispiele

Tailwind CSS Samples

Web Python Bildverarbeitung Beispiele

Bulma CSS Framework Beispiele

SVG-Sprite-Sheet-Generator

Glassmorphism-/Neumorphism-CSS-Snippet-Generator

SVG-Favicon-Generator

Diagonales Wasserzeichen-Tool

SVG-, Favicon- und Icon-Workflow-Tools

Tools fur Audio-Encoding und Formatkonvertierung

Tools fur Bildformat-Konvertierung und animierten Export

Tools fur JSON-Austausch und Format-Ubersetzung