Keine Werbung mögen? Gehen Werbefrei Heute 

Pixel Art Canvas & CSS Export

FarbeEntwicklerBild

ANZEIGE Entfernen?

EINGANG

Automatischer Prozess

Canvas-Einstellungen

Gittergröße

Die Änderung der Gittergröße leert den Canvas.

Palette

Vorgabe

Aktuelle Farbe

Exportoptionen

Pixelgröße (px)

Die Größe jedes Pixels im exportierten PNG/SVG/CSS-Ausgabe.

Format

AUSGABE

Client-Seite

ANZEIGE Entfernen?

Führung

Pixel Art Canvas & CSS Export

Malen Sie krispe 8-Bit-Stile-Sprites direkt im Browser und exportieren Sie sie als reine CSS-Box-Shadow-Kunst, skalierbare SVG, rastere PNG oder portable JSON. Der Canvas reicht von 8×8 bis 64×64, bietet klassische Paletten (NES, Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16) und verfügt über Mal-, Löschen-, Füll- und Farbabgleich-Werkzeuge mit unbegrenztem Undo und Redo.

Nutzung

Wählen Sie eine Gittergröße zwischen 8×8 und 64×64. Größere Gitter bieten mehr Detail, aber eine verlangsamte Malgeschwindigkeit.
Wählen Sie eine vordefinierte Palette oder geben Sie eine Hex-Farbe in den Farbpicker ein.
Klicken Sie auf die Schaltfläche Malen, Löschen, Füllen oder Farbabgleich in der Werkzeugleiste des Canvas – oder drücken Sie P, E, F, I.
Klicken und ziehen Sie auf dem Canvas, um zu malen. Verwenden Sie Ctrl+Z und Ctrl+Y um zu rückgängig zu machen und wiederherzustellen.
Wählen Sie ein Exportformat (CSS box-shadow, SVG, PNG-Data-URI oder JSON), stellen Sie die Pixelgröße ein und kopieren Sie den Code oder laden Sie die Datei herunter.

Funktionen

Sechs Gittergrößen – 8×8, 16×16, 24×24, 32×32, 48×48 und 64×64 für alles von kleinen Icons bis zu vollständigen Spriteblättern.
Sieben vordefinierte Paletten – NES (54 Farben), Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16 und eine Graustufenstufe.
Vier Zeichenwerkzeuge – Malen, Löschen, Malwasser (Flood Fill) und Farbabgleich mit einzelne Tastenkürzel.
Glattes Zeichen bei Drag – Die Bresenham-Interpolation der Linien hält die Striche kontinuierlich, selbst auf kleinen Bildschirmen.
Unbegrenztes Undo und Redo – 60-Schritt-Geschichte mit den Tastenkombinationen Ctrl+Z und Ctrl+Y.
Vier Exportformate – CSS box-shadow, SVG, PNG-Data-URI und JSON-Gitterdaten, jeweils mit einem lebendigen 1:1-Vorschau.
Touch-Unterstützung – Funktioniert auf Tablets und Smartphones mit nativer Touch- und Pointer-Ereignis.
Transparente Zellen – Leere Pixel bleiben in allen Exportformaten transparent, nicht weiß gefüllt.

 Häufig gestellte Fragen

Was ist ein Pixel in digitaler Bildverarbeitung?

Ein Pixel (kurz für picture element) ist das kleinste adressierbare Element eines rasterschen Bildes. Jedes Pixel speichert Farbinformation – typischerweise Rot-, Grün- und Blau-Kanäle mit Werten zwischen 0 und 255 – und zusammen bilden ein Gitter von Pixeln ein vollständiges Bild.
Wie wird CSS box-shadow für Pixelkunst gerendert?

CSS box-shadow akzeptiert mehrere Schattenanweisungen, jeweils mit einer x-Achsenverschiebung, y-Achsenverschiebung, Blursradius, Ausbreitungsradius und Farbe. Wenn Blurs und Ausbreitung auf null gesetzt und jeder Schatten auf einem Gitter platziert wird, wird ein einzelnes 1x1-Element verwendet, um einzelne farbige Rechtecke zu zeichnen – was eine reine CSS-Pixelkunst ohne jegliche Rasterdaten erzeugt.
Was ist eine begrenzte Farbpalette und warum wird sie verwendet?

Eine begrenzte Palette beschränkt eine Kunst auf eine kleine, feste Farbmenge, oft entsprechend den Hardwarebeschränkungen retro-Konsolen wie dem NES, Game Boy oder Commodore 64. Die Arbeit in einer Palette erzeugt visuelle Kohärenz, erweckt eine erkennbare Ära und zwingt zu bewussten Farbwahl statt willkürlichen Farbwahl.
Was ist das Flood-Fill-Algorithmus?

Flood fill ist ein Grafikalgorithmus, der an einem Zielzellen beginnt und sich auf alle benachbarten Zellen ausbreitet, die die gleiche Farbe haben, und ersetzt jede mit einer neuen Farbe. Die meisten Malwasserwerkzeuge verwenden ein vierseitiges Flood Fill (oben, unten, links, rechts), das mit einem Stapel oder Warteschlange implementiert wird, um tiefes Rekursion zu vermeiden.
Warum sind rastere und vektorbasierte Pixelkunst unterschiedlich?

Rastere Pixelkunst wird als Gitter aus gefärbten Zellen (PNG, Data URI) gespeichert. Vektorbasierte Pixelkunst repräsentiert jede Zelle als mathematische Form (SVG oder CSS box-shadow), die unendlich skalierbar ist und keine Klarheit verliert. Vektor-Ausgabe ist ideal für Web-UIs, wo shape-rendering: crispEdges die blockartige Optik bei jeder Vergrößerung beibehält.

Möchten Sie werbefrei genießen? Werde noch heute werbefrei



 Erweiterungen installieren

IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche

恵 Die Anzeigetafel ist eingetroffen!

Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!

ANZEIGE Entfernen?