🎨 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 */