CSS box-shadow art dot shadow puppet creation generator | ZeroTools

The CSS pixel art and dot shadow generator lets you edit square grids of 8×8, 16×16, or 32×32, configuring colored cells to output CSS box-shadow data.

The initial state is a 16×16 empty grid. When you change the size, any dots currently being edited are erased, switching to a new empty grid of that specific size.

This is not a feature that automatically scales your work in progress or carries it over to a different grid dimension, so copy any needed code before changing sizes.

The drawing tools consist of a brush and an eraser. The brush applies the currently selected color to a cell, while the eraser removes color from that cell.

The default color is a reddish #ef4444, and you can pick a different color using the browser's color picker. To empty the grid entirely, use the reset function.

There is no undo or redo history, no layer system, and reset contents are not saved within the screen.

Cell interaction is built upon mousedown, mouseenter, and window mouseup events. Drawing begins when you press on a cell; as you move across the grid, the script continuously applies or removes color on the cells directly under the pointer.

The drawing state ends once you release the mouse button. It does not utilize PointerEvents, so dedicated touch or pen dragging is not natively supported.

Because pointer handling lacks specialized mobile or pen dragging optimization and doesn't enforce left-button exclusive drawing, behavior may vary.

If the drag interaction feels unresponsive on your specific device or browser, you can edit by clicking cells one by one. There is no dedicated keyboard-only navigation for painting cells, making a pointer device necessary.

For selecting colors, in addition to the custom color picker, there are four fixed palettes: Retro Game, Pastel, Neon, and Monochrome, each offering 8 colors for a total of 32.

Clicking a color in the palette selects it and automatically switches your active tool to the brush. There are no features to automatically determine color harmony among palettes or extract representative colors from an image to build a new palette.

There are three available presets to immediately test the conversion results: Retro Heart contains coordinates and colors for an 8×8 grid, Dot Mushroom is 16×16, and Invader is 8×8.

Selecting a preset completely replaces the current grid size and all dots with the sample's content. It does not overlay the preset onto your existing drawing, so if you wish to preserve your current work, copy the output code beforehand.

After loading a preset, the colors of individual cells can be modified using the standard brush and eraser. You can use the color picker or the 32 fixed colors to repaint specific sections and adjust the individual dot scale before obtaining the final code.

These samples serve as starting points to verify the box-shadow rendering and editing process; they are not intended as a template directory or a storage area for user artwork.

The data within the grid is managed as a collection of coordinate keys (X, Y) mapped to selected values like 6-digit HEX codes. The top-left cell is 0,0, with X increasing to the right and Y increasing downwards.

These coordinates are used to link the visual cell positions on the editing screen to the shadow distances output in the CSS code.

When you load an image via the selection button, it is converted to fit the currently selected 8×8, 16×16, or 32×32 grid. The file is read as a Data URL using FileReader.

If the browser decodes it as an image, it is drawn onto a temporary Canvas matching the grid's dimensions. Image smoothing is disabled on the Canvas, but it forces the image into a square drawing space without preserving the original aspect ratio with padding or cropping choices.

After drawing, the RGBA values of each pixel are analyzed. Pixels with an alpha value of 50 or below are discarded as empty cells.

For pixels with an alpha above 50, the RGB values are converted into an opaque 6-digit HEX color. For instance, an RGB of 239, 68, 68 becomes #ef4444.

Original alpha values are not retained in the code, meaning faint semi-transparent areas become fully opaque if they exceed the threshold.

Because details and gradients are reduced to a maximum of 32×32 pixels, this tool is not meant for faithfully preserving photographs.

Supported formats depend entirely on what your browser can decode. Notably, the image loading and decoding process lacks onerror or try...catch handling; if the process fails, no error explanation is displayed on screen.

Furthermore, selecting the exact same file again may not trigger a change in the input, requiring you to pick a different file first.

Successful conversions immediately replace the existing grid with the image-derived colors without leaving an automatic undo history.

This function does not generate an image file itself, but rather a collection of cells used for subsequent box-shadow generation.

It performs no conversion to PNG or SVG, image downloading, background removal, edge extraction, color reduction specification, dithering, or cropping.

If you need a specific composition or limited color palette, prepare the image with an external editing tool before importing, or manually adjust the cells after conversion.

Cells containing colors are processed starting from the smallest Y coordinate row to the largest, and within the same row, from the smallest X coordinate column to the largest.

This ordering ensures the generated code can be easily traced starting from the top left of the grid; it does not perform color compression or rendering optimization.

Transparent cells are absent from the data, so no box-shadow values are created for them.

The dot resolution ranges from 1 to 30px, defining both the width and height of a single dot and the spacing to the adjacent coordinates.

If a cell has coordinates X=2, Y=3, a scale of 10px, and a color of #ef4444, the horizontal distance is 2×10 (20px) and the vertical distance is 3×10 (30px).

This specific cell translates to a single shadow value of 20px 30px #ef4444. No blur radius, spread radius, or inset keywords are added.

All generated shadows are concatenated with commas and newlines to form a single box-shadow rule. Since the reference div itself accounts for the top-left dot, the color at 0,0 simply overlaps it as 0px 0px color.

Each dot's color is inserted exactly as defined; the tool does not group consecutive cells of the same color, shorten values to 3-digit HEX, compress declarations, or generate minified variants.

A maximum of 1024 cells can be processed in y/x order.

Changing the scale triggers a recalculation of the div's width and height, as well as all box-shadow coordinates. This allows you to scale the entire artwork while maintaining the dot proportions directly in the tool.

If you manually edit the numbers after copying, you must adjust the reference element's dimensions and every individual X and Y coordinate by the exact same ratio; otherwise, dots will overlap or leave unwanted gaps.

The final output is a single div element equipped with a style attribute. This inline style includes display: inline-block, a width and height matching your scale, a transparent background, and the multi-value box-shadow rule.

It does not generate complete HTML documents, <style> tags, CSS classes, external stylesheets, or React components. If the grid is completely empty, it merely outputs a comment prompting you to draw, and empty shapes cannot be copied.

The on-screen preview lets your browser render the exact generated box-shadow. To keep it within the viewing area, the tool offsets the reference element's position exclusively for the preview.

This visual adjustment is not included in the copied code. When you paste it, shadows will naturally expand to the right and bottom of the reference element, so you must define appropriate margins, positioning, or parent overflow settings suited to your layout.

Clicking to copy the HTML attempts to send the entire displayed code to the Clipboard API. A completion notice appears immediately for about 2 seconds, but this does not guarantee success.

Please verify the pasted code in your destination environment, and manually select and copy the text from the code block if it fails due to browser permission issues.

It offers no file saving, copy history tracking, or automated code injection.

Before embedding the output code, ensure you verify contrast against your target page's background, available display area, and responsiveness at that scale.

Your results may also be constrained by Content Security Policies prohibiting inline styles or overridden by your site's existing CSS positioning.

This tool does not audit your entire HTML or CSS architecture and cannot guarantee perfect rendering post-integration.

Filling a 32×32 grid results in up to 1024 individual box-shadow values listed inside a single style attribute. The more dots you place, the longer the code becomes and the more distinct shadows the browser must render.

Achieving a visual result with a single element is not synonymous with lightweight or high-speed rendering across all environments.

Test the performance impact on your actual pages and target devices, reducing the grid size or colored cells if necessary.

The image conversion feature strictly scales files down to a maximum of 32 square cells, stripping alpha values below 51 to enforce opaque replacements.

This is not a high-fidelity image converter designed to maintain fine details, smooth anti-aliased edges, translucency, or original aspect ratios.

Verify whether the output still resembles pixel art in the preview, and take the time to erase unwanted cells or replace colors before copying the code.

The scope of output is strictly limited to the inline style of one div. The tool does not support PNG, JPEG, WebP, SVG, or GIF image exporting, animations, layer management, undo/redo buffers, saving or loading artwork files, CSS minification, or automatic class name generation.

If you intend to reuse the artwork across multiple pages, you will need to manually extract the values into CSS classes and adapt them to your project's workflow.

If you convert original images or reference artworks for public use, this tool cannot determine licensing or rights ownership. You are responsible for verifying material usage conditions, trademarks, copyrights, and publishing guidelines.

The generated code itself comes with no blanket guarantees regarding display quality, browser compatibility, or commercial viability.

Use the code only after understanding these functional boundaries and testing the copied results.