This is Masamune. He's an SNES sprite drawn in pure CSS. To draw your own SNES, NES or any other sort of pixel art, use the CSS pixel art creator below. To see my current collection of SNES themed CSS, click here.

CSS PIXEL ART CREATOR

SETTINGS
INSTRUCTIONS
  1. Click anywhere on the grid to start drawing.
  2. You'll notice the CSS box shows you the actual css corresponding to your drawing.
  3. You should also see a live rendering of what your css class really looks like in your browser below.
  4. To change colors click on any of the color input fields
  5. For an example of what you can create, click the red Example button

1Pixels used here to mean a single square on the grid, not literal pixels. 1 "grid pixel" === 10x10 real pixels.

1Min/Max width: 30/512. Min/Max height: 30/478

2Accepts hex, rgb, rgba, hsl, hsla, keywords (e.g. black).

Current color. Valid.

Current color. Invalid. Last valid color still active.

GRID
The grid would normally go here but your browser doesn't support the canvas element
CONTROLS
CSS (Select All)
.foobar-container {
  width: 1em;
  height: 1em;
}

.foobar {
  width: 1em;
  height: 1em;
  
  
  
}
HTML (Select All)
<div class="foobar-container">
    <div class="foobar"></div>
</div>
LIVE RENDERING

PIXELGRID API

pixelGrid.init([width][,height])

Initializes the grid.

Optional Parameters: width {number of literal pixels}, height {number of literal pixels}.

If no arguments are passed in, the grid will attempt to fill in the width of the parent container and dynamically set the height based on the screen size.

pixelGrid.clear()

Clears any drawing on the grid leaving only the grid.

pixelGrid.width(widthInput)

Resizes the width of the grid based on the input parameter.

Required Parameter: width {number of literal pixels}.

pixelGrid.height(heightInput)

Resizes the height of the grid based on the input parameter.

Required Parameter: height {number of literal pixels}.

pixelGrid.color(x, y, color)

Draws in a pixel at a specific (x, y) coordinate.

Required Parameters: x {number in scaled pixels1}, y {number in scaled pixels1}, color {string color code2}.

pixelGrid.batchColor(JSON)

Batches the pixelGrid.color() method by taking in a JSON message. See the sidebar for the allowable format.

Required Parameter: JSON {JSON}.

Sample JSON for pixelGrid.batchColor():

var zero = {
    "name": "zero",
    "width": "",
    "height": "",
    "colors": {
        "black": "#000000",
        "white": "#ffffff",
        "darkRed": "#740000",
        "red": "#aa0000",
        "lightRed": "#ff0000",
        "lightGrey": "#bbbbbb",
        "grey": "#555555",
        "lightBlue": "#55aaff",
        "blue": "#0080ff",
        "orange": "#ff7700",
        "skin": "#ffbb80",
        "yellow": "#ffff00",
        "lightGreen": "#55d200",
        "green": "#358300"
    },
    "coordinates": [
        {"x": 16, "y": 0, "color": "black"},
        {"x": 15, "y": 1, "color": "black"},
        {"x": 16, "y": 1, "color": "black"},
        {"x": 20, "y": 1, "color": "black"},
        {"x": 14, "y": 2, "color": "black"},
        {"x": 15, "y": 2, "color": "darkRed"},
        {"x": 16, "y": 2, "color": "black"}
    ]
};

IMAGE TO CSS CONVERTER [BETA]

Note: YMMV. For best results use a png less than 100 x 100 pixels. Anything larger may take until the end of time.
Please be patient while converting takes place. It may take a few seconds

Image

SNES CSS COLLECTION

Zero

Robot Ness

Starman

Female Mage