¿Odias los anuncios? Ir Sin publicidad Hoy 

Canvas de Arte en Píxeles & Exportación de CSS

ColorDesarrolladorImagen

ANUNCIO · ¿ELIMINAR?

APORTE

Proceso automático

Ajustes del lienzo

Tamaño de la cuadrícula

Cambiar el tamaño de la cuadrícula limpia el lienzo.

Paleta

Programar

Color actual

Opciones de exportación

Tamaño del píxel (px)

Tamaño de cada píxel en la salida PNG/SVG/CSS.

Formato

PROD.

Lado cliente

ANUNCIO · ¿ELIMINAR?

Guía

Lienzo de arte de píxeles & exportación en CSS

Canvas de Arte en Píxeles & Exportación de CSS

Pinte sprites en estilo de 8 bits crípticos directamente en su navegador y exporte ellos como arte en CSS con sombras, SVG escalable, PNG rasterizado o JSON portátil. El lienzo se ajusta desde 8×8 hasta 64×64, incluye paletas clásicas (NES, Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16) y ofrece herramientas de pintura, borrador, relleno y toma de color con deshacer e historial ilimitado.

Cómo Usar

Elige un tamaño de cuadrícula desde 8×8 hasta 64×64. Cuadrículas más grandes ofrecen más detalle, pero reducen la velocidad de pintado.
Elige una paleta predeterminada o introduce cualquier color en hexa en el selector de colores.
Haz clic en el botón de pintura, borrador, relleno o toma de color en la barra de herramientas del lienzo — o presiona P, E, F, I.
Haz clic y arrastra en el lienzo para pintar. Usa Ctrl+Z y Ctrl+Y para deshacer y volver a hacer.
Elige un formato de exportación (CSS con sombras, SVG, URI de PNG o datos en JSON), establece el tamaño del píxel, luego copia el código o descarga el archivo.

Características

Seis tamaños de cuadrícula – 8×8, 16×16, 24×24, 32×32, 48×48 y 64×64 para cualquier cosa desde íconos pequeños hasta hojas completas de sprites.
Siete paletas predeterminadas – NES (54 colores), Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16 y una escala de grises.
Cuatro herramientas de dibujo – pintura, borrador, llenado (relleno automático) y toma de color con atajos de teclado.
Dibujo suave al arrastrar – la interpolación de líneas de Bresenham mantiene los trazos continuos incluso en pantallas pequeñas.
Deshacer e historial ilimitado – historia de 60 pasos con atajos de teclado Ctrl+Z y Ctrl+Y.
Cuatro formatos de exportación – CSS box-shadow, SVG, URI de PNG y datos en JSON, cada uno con una vista en tiempo real 1:1.
Soporte para toques – funciona en tabletas y teléfonos con eventos nativos de toque y puntero.
Celdas transparentes – los píxeles vacíos permanecen transparentes en todos los formatos de exportación, no se pintan de blanco.

 Preguntas frecuentes

¿Qué es un píxel en la imagen digital?

Un píxel (abreviatura de picture element) es la unidad más pequeña de una imagen raster. Cada píxel almacena información de color — típicamente valores de canales rojo, verde y azul entre 0 y 255 — y juntos, una cuadrícula de píxeles forma una imagen completa.
¿Cómo se renderiza el arte de píxeles con CSS box-shadow?

CSS box-shadow acepta múltiples declaraciones de sombra, cada una con un desplazamiento en x, y, radio de borde, radio de expansión y color. Estableciendo el borde y la expansión a cero y colocando cada sombra en una cuadrícula, se dibuja individualmente cada rectángulo de color a partir de un solo elemento de 1x1 — produciendo una imagen de píxeles pura en CSS sin datos rasterizados.
¿Qué es una paleta de colores limitada y por qué se utiliza?

Una paleta limitada restringe una obra a un pequeño conjunto fijo de colores, a menudo coincidiendo con las limitaciones del hardware de consolas retro como el NES, el Game Boy o el Commodore 64. Trabajar dentro de una paleta crea coherencia visual, evoca una época reconocible y obliga a decisiones de color deliberadas en lugar de arbitrarias.
¿Qué es el algoritmo de relleno?

El algoritmo de relleno es un algoritmo gráfico que comienza en una celda objetivo y se extiende hacia todas las celdas vecinas que comparten el mismo color, reemplazando cada una con un nuevo color. La mayoría de las herramientas de relleno utilizan un relleno en cuatro direcciones (arriba, abajo, izquierda, derecha) implementado con una pila o cola para evitar recursiones profundas.
¿Por qué el arte de píxeles rasterizado y vectorizado es diferente?

El arte de píxeles rasterizado se almacena como una cuadrícula de celdas coloreadas (PNG, URI de datos). El arte de píxeles vectorizado representa cada celda como una forma matemática (SVG o CSS box-shadow) que se escala infinitamente sin perder claridad. El formato vectorizado es ideal para interfaces web donde shape-rendering: crispEdges conserva el aspecto bloqueado en cualquier nivel de ampliación.