Pixel Art 9-Slicer 4-CSS
Turn a single pixel art image into infinitely resizable UI panels that stay crisp at any size. Pure CSS, no JavaScript required.
Perfect for HTML5 game UIs - overlay crisp pixel art panels directly on your canvas using plain divs, no extra code needed. Build clickable buttons with pixel art frames, dialogue boxes, inventory screens, and HUD elements. Works equally well for any web project that needs a resizable decorative border or background panel with a retro flair.
How it works
Load your spritesheet, drag the four slice guides to define the corners, and the tool generates a ready-to-paste CSS snippet. Scale up your pixels, choose how edges tile or stretch, and see the result live in the preview.
Features
- Live preview updates as you drag
- Pixel scale control - see your art at 1×, 2×, 3× etc without blurriness
- Independent horizontal and vertical repeat modes (stretch, tile, or round)
- One-click CSS copy
No install needed. Runs entirely in the browser - just open the page and go. Browse for a file, or drag and drop.
Development log
- Introducing the 9-slicer11 hours ago
Comments
Log in with itch.io to leave a comment.
simply wow , i don't know how anything could top something as powerful as this tool!
You mean as a nine-slicing tool? Yeah, I think it's complete. it's pretty focused on it's one task tho, so to call it "powerful" is a bit strange in a world of photoshops etc.
well it solves a problem very well and is user friendly!
That in and of itself is powerful.