🎨 Source Image

Instructions:
• Click "Add Widget" to create a selection
Drag red box body to move the entire widget
Drag blue box body to reposition it within red
Resize red to adjust extraction area (blue stays in place)
Resize blue to adjust 9-slice borders
• Click "Generate Spritesheet" when done
Base Image

🎭 Widget Preview

Test your 9-slice widgets:
• Drag the resize handle in the bottom-right corner of each preview
• Watch how the borders scale perfectly while corners remain crisp
• Generate the spritesheet first to see previews

Generate spritesheet to see widget previews...

📦 Output Spritesheet

Generated CSS

/* Click "Generate Spritesheet" to create CSS */