.px-grid-layout { display: grid; grid-template-columns: 280px 1fr 280px; gap: 16px; align-items: start; } @media (max-width: 960px) { .px-grid-layout { grid-template-columns: 1fr; } .px-right-sidebar { grid-column: span 1; } } .px-panel { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(51, 65, 85, 0.6); border-radius: 12px; padding: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .px-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #f43f5e; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; } /* 工具箱按键 */ .tool-btn { background: #0f172a; border: 1px solid #1e293b; border-radius: 8px; padding: 8px 10px; font-size: 12px; font-weight: 600; color: #94a3b8; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 8px; width: 100%; } .tool-btn:hover { border-color: #f43f5e; color: #ffffff; background: #1e1b4b; } .tool-btn.active { background: linear-gradient(135deg, #e11d48, #f43f5e); border-color: #fb7185; color: #ffffff; box-shadow: 0 4px 12px rgba(244, 63, 94, 0.4); } /* 画布工作区容器 */ .canvas-area { background: #040817; border: 2px solid #1e293b; border-radius: 14px; min-height: 580px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8); } .checker-bg { background-image: linear-gradient(45deg, #0f172a 25%, transparent 25%), linear-gradient(-45deg, #0f172a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #0f172a 75%), linear-gradient(-45deg, transparent 75%, #0f172a 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0px; background-color: #020617; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); border-radius: 4px; } #mainCanvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; cursor: crosshair; touch-action: none; } /* 色板方块 */ .color-cell { width: 22px; height: 22px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.2); transition: transform 0.1s; } .color-cell:hover { transform: scale(1.15); z-index: 2; } .color-cell.active { border: 2px solid #ffffff; box-shadow: 0 0 8px #ffffff; transform: scale(1.2); } /* 预览框 */ .preview-box { background: #030712; border: 1px solid #1e293b; border-radius: 8px; padding: 12px; display: flex; align-items: center; justify-content: center; min-height: 100px; } #previewCanvas1x, #previewCanvas2x { image-rendering: pixelated; image-rendering: crisp-edges; } .sample-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 6px; padding: 4px 8px; font-size: 11px; color: #cbd5e1; cursor: pointer; transition: all 0.15s; } .sample-card:hover { background: #e11d48; color: #ffffff; }

像素画 / 8-bit 图标在线编辑器

纯前端专业级像素画与 8-bit 图标在线编辑器，支持 16x16 / 32x32 / 48x48 / 64x64 等多种画布尺寸，提供画笔、橡皮、油漆桶、几何形状、颜色吸管、复古色板预设与撤销重做。支持一键导出超清透明 PNG、SVG 矢量文件及纯 CSS box-shadow 单标签代码。

画布规格 {{ gridWidth }} × {{ gridHeight }}

绘制工具

笔刷粗细: {{ brushSize }} px

几何变换与平移

预置模板

{{ tpl.name }}

网格线

光标坐标: [{{ cursorX }}, {{ cursorY }}]

当前画笔颜色

{{ currentColor.toUpperCase() }}

RGB: {{ hexToRgb(currentColor) }}

复古主题色板

画布已用颜色历史

画布为空

实时尺寸预览 (1x / 2x)

100% 原始大小

200% 放大

导出与生成代码

PNG 导出倍率:

🖼️ 导出透明 PNG 图片

📐 导出 SVG 矢量文件

🎨 复制纯 CSS box-shadow 单标签代码

介绍

本像素画编辑器专为复古游戏开发者、前端设计者与像素艺术爱好者打造。内置多种经典调色板（PICO-8、GameBoy、NES 8-bit 等），支持透明背景与网格辅助线，并可直接生成不依赖任何图片文件的纯 CSS box-shadow 像素图标代码。

无需任何图片文件，直接将以下 HTML 与 CSS 复制至网页中即可完美渲染当前像素图标：

关闭

复制 CSS 代码