Local processing
9-Slice UI Generator
Turn a frame or panel into scalable UI, preview the result and export ready-to-use border settings for your engine.
About this tool
Create nine-slice UI panels locally. Set scalable borders, preview stretched panels and export settings for Godot, Unity, Flutter, Android, CSS, React and Unreal.
What you can do
- Mark fixed corners and scalable edges directly on a PNG, JPEG or WebP panel.
- Preview the same panel at any target size before you export it.
- Copy or download settings for Godot, Unity, Flutter, Android/Kotlin, CSS, React and Unreal.
- Generate an Android .9.png with stretch and content guides without uploading your UI art.
How to use it
- 1Choose a UI panel image or drag it onto the tool.
- 2Set the left, right, top and bottom borders around the non-scalable corners.
- 3Inspect the stretched preview, then copy code or download the settings for your target.
Frequently asked questions
What is a 9-slice UI panel?
A 9-slice splits a panel into four fixed corners, four scalable edges and one scalable center. It lets one small frame resize cleanly for buttons, dialogs and HUD panels.
Can I export a Godot StyleBoxTexture?
Yes. Select Godot in the export panel to copy or download StyleBoxTexture settings with the exact texture margins.
Does the generator upload my UI image?
No. Image loading, previewing and export generation happen in your browser. The panel stays on your device.