Softonic

Mesh-Verlauf-Generator

Erstelle einen weichen, mehrfarbigen Hintergrund aus 4, 6 oder 9 beweglichen Punkten. Wähle für jeden Punkt eine Farbe, verschiebe ihn auf der Fläche, probiere eine sorgfältig zusammengestellte Zufallspalette aus und exportiere das Ergebnis als SVG oder PNG. Zusätzlich kannst du eine CSS-Annäherung aus übereinanderliegenden radialen Verläufen kopieren. Das Projekt bleibt während der Bearbeitung in diesem Browser-Tab.

So entsteht ein Verlauf im Mesh-Stil

  1. 1

    Raster wählen

    Beginne mit 4, 6 oder 9 Kontrollpunkten. Mehr Punkte erzeugen mehr abgegrenzte Farbbereiche.

  2. 2

    Farben festlegen

    Nutze den Farbwähler an jedem Punkt. Der Editor speichert sechsstellige HEX-Farben.

  3. 3

    Punkte verschieben

    Ziehe einen Punkt, gib seine horizontale und vertikale Position ein oder verwende die Pfeiltasten.

  4. 4

    Ausgabegröße wählen

    Wähle ein Querformat, Breitbildformat oder Quadrat für SVG und PNG.

  5. 5

    Entwurf exportieren

    Lade PNG oder SVG herunter oder kopiere die CSS-Annäherung aus radialen Verläufen.

So werden die drei Ausgaben gerendert

  • PNG nutzt dieselbe entfernungsgewichtete Farbmischung wie die Vorschau. Bei einem anderen Seitenverhältnis werden dieselben relativen Punkte in die neuen Abmessungen eingepasst.
  • SVG legt radiale Verläufe an den gleichen Kontrollpunkten übereinander und bleibt beim Skalieren scharf.
  • CSS erzeugt pro Punkt eine Ebene mit radial-gradient() über einer Grundfarbe. Eine separate Bilddatei ist nicht nötig.

SVG und CSS verwenden dieselben Projektdaten, sind jedoch schlanke Annäherungen an eine echte Verlaufsmatrix. Sie sehen daher nicht pixelgenau wie die PNG-Vorschau aus.

Hinweise zur Farbpalette

  • Verwandte Farbtöne ergeben meist sanfte Übergänge.
  • Kontrastreiche Farben machen die Grenzen zwischen Bereichen deutlicher.
  • Zufallspaletten sind Ausgangspunkte und keine Garantie für gute Lesbarkeit.
  • Prüfe den Kontrast von Text, Symbolen und Bedienelementen auf dem fertigen Hintergrund.

Kontrollpunkte positionieren

Ziehe einen nummerierten Punkt direkt in der Vorschau oder fokussiere ihn und nutze die Pfeiltasten. Mit Umschalt und einer Pfeiltaste bewegst du ihn um fünf Prozentpunkte. Die Zahlenfelder bieten eine weitere präzise Eingabemöglichkeit.

Punkte dürfen bis an den Rand reichen. Eng beieinanderliegende Punkte bündeln ihre Farben, während größere Abstände jeder Farbe mehr Raum geben.

Typische Anwendungen

  • Hintergründe für Kopfbereiche und Abschnittstrenner.
  • Social-Media-Karten und Video-Vorschaubilder.
  • Präsentationen und Illustrationen.
  • Startbildschirme und dekorative Flächen.

PNG entspricht der Vorschau am genauesten. SVG eignet sich zum verlustfreien Skalieren, CSS für einen bearbeitbaren Hintergrund ohne Bilddatei.

Datenschutz und Browserspeicher

Farben, Positionen und Auflösung bleiben im Arbeitsspeicher des Browsers und in sessionStorage. Sie werden weder an Funnel-URLs angehängt noch im Serverstatus gespeichert. Die Anwendung kann lediglich erfassen, dass ein Export stattgefunden hat, ohne Projektwerte zu übertragen.

Das Projekt lässt sich bis zu sechs Stunden aus sessionStorage wiederherstellen, solange der aktuelle Tab geöffnet ist. Beim Schließen wird es üblicherweise früher gelöscht. Lade wichtige Ergebnisse deshalb herunter oder kopiere sie.

Häufig gestellte Fragen

Sie verwenden unterschiedliche Renderverfahren. PNG mischt Pixel nach Entfernung, SVG und CSS überlagern radiale Verläufe. Farben und Positionen sind gleich, die Pixel jedoch nicht.

Ja. Ziehe ihn mit dem Zeiger, nutze die Positionsfelder oder fokussiere ihn und drücke die Pfeiltasten. Mit Umschalt sind größere Schritte möglich.

Der Editor speichert sechsstellige HEX-Werte. Nutze den Farbwähler oder wandle RGB beziehungsweise HSL vorher in HEX um.

Nein. Der kopierte CSS-Code nähert den Effekt mit mehreren standardmäßigen radialen Verläufen an.

Es lässt sich im aktuellen Tab bis zu sechs Stunden aus sessionStorage wiederherstellen. Beim Schließen wird es normalerweise früher entfernt. Über Server-Anfragen oder Funnel-URLs wird es nicht übertragen.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

Binär-zu-ASCII-Konverter

Fügen Sie Binärdaten (durch Leerzeichen getrennte Bytes oder einen langen Bitstrom) ein und erhalten Sie den ASCII-Text, den sie darstellen. Unterstützt 7-Bit- und 8-Bit-Codierungen.

JSON-Formatierer

Fügen Sie JSON ein, um es mit 2 oder 4 Leerzeichen lesbar zu formatieren, kompakt zu minifizieren oder vor dem Kopieren schnell die Syntax zu prüfen.

Zufälliger Farbgenerator

Erzeuge 1 bis 50 zufällige HEX-Farben mit Farbfeldern zum Prüfen, Kopieren und Verwenden in CSS, Tests oder Palettenideen.