한국어
Home › Game Dev › 9-Slice Preview

9-Slice Preview

Drag guides to split a UI button or speech bubble image into nine slices, then see how it looks when stretched to any size. Copy the border values or CSS border-image code.

Change UI imageChoose files
Drag the dashed lines on the original to set the borders
Stretched result

Borders (px)

Preview size

How to use

1Upload an imageUpload a UI image with rounded corners, such as a button, panel or speech bubble.
2Set the bordersDrag the four dashed lines so each corner fits inside. You can also type the numbers.
3Check and copyStretch it with the size sliders, and when it looks right, copy the border values or CSS code.

When it helps

If you simply stretch a button or dialog image, the rounded corners and border thickness stretch too and look blurry. 9-slice splits the image into a three-by-three grid so the corners stay the same and only the center and edges stretch.

If the borders are off, part of a corner stretches or the border pattern breaks when resized. Previewing at real sizes with this tool lets you catch the problem before putting it in your engine.

Use the values for Unity sprite borders, Godot NinePatchRect margins or CSS border-image-slice on the web. CSS code is generated for web use as well.

FAQ

Engines use a different order for border values.

This tool shows left, right, top and bottom separately. CSS border-image-slice uses top, right, bottom, left, so the code is written in that order.

Does it work for pixel art UI?

Yes. Small images are shown scaled up, and the result is drawn without blurring the pixels.

What if the preview is smaller than the borders combined?

The corners are scaled down proportionally so they do not overlap. Engines do something similar, but details can vary between engines.

What is repeat mode?

Instead of stretching, the center and edges are tiled. It suits borders with patterns and is similar to round in CSS.

Is my image uploaded?

No. Everything is processed inside your browser.