Home / Art & Sprites / 9-Slice Panel Maker

9-Slice Panel Maker

A dialogue box, an inventory window and a button usually share one frame drawn once. Stretch that image and the corners and borders smear. Drop the panel and the tool finds where the corners end, or drag the guides yourself. Preview it at any size, stretch or tile the middle, and download it at the sizes you need. The exact slice values for Godot's NinePatchRect, Unity's sprite border, Phaser's NineSlice and CSS border-image are written for you, and Pro adds batches of sizes plus hover, pressed and disabled button states.

Click or drop a UI panel PNG
Windows, dialogue boxes, buttons, bars, tooltips

Drag the pink guides, or set them below. Corners outside the guides never stretch.

Slices (pixels)
Left8
Right8
Top8
Bottom8
Filling
Middle
Borders
Pixel scale1×
Size ×
Drop a panel to start.
Pro · Every size in your list in one ZIP, each with normal, hover, pressed and disabled button states, plus a JSON file with the slice values. See plans

What 9-slice scaling is

A 9-slice (or 9-patch) image is cut into a 3 × 3 grid by four lines. The four corners are drawn at their real size, the top and bottom borders stretch only sideways, the left and right borders only up and down, and the middle fills the rest. One small frame can then be any window, dialogue box or button without blurry corners or fat borders. Every major engine supports it, but each one wants the four numbers in its own place and order.

Finding the slices

The tool looks for the longest run of columns and rows that are identical, which is the part that can stretch without changing the look, and puts the guides at its edges. Ornate frames with no flat part get guides at a quarter of the size. Drag the guides if you want more of the frame kept at its real size. Choose Tile for patterned borders such as stone, rope or wood planks, so they repeat instead of stretching.

Using the values

Godot uses a NinePatchRect with patch margins. Unity stores the border on the sprite in the order left, bottom, right, top, set in the Sprite Editor, and an Image component set to Sliced. Phaser 3.60 and later has a NineSlice game object. On the web, border-image with the same four numbers does the job. Copy the line you need from the boxes under the preview.

Is my image uploaded?

No. Everything happens in your browser.