Home/Image Editing, Compression & Conversion Tools/PNG 9-Slice Scale Grid & Border Spec Visualizer

PNG 9-Slice Scale Grid & Border Spec Visualizer

Test 9-slice PNG and SVG scale grids client-side. Configure pixel insets, inspect arbitrary responsive stretch ratios, and export ready-to-paste CSS border-image, Godot, and Unity specs.

Slice Inset Specifications

Drop PNG, WebP, or SVG sprite here, or browse

Local browser processing (Zero server uploads)

Active: scifi-panel-ui.png64 × 64 px

Guide Offsets (Pixels)

Top Border:

Right Border:

Bottom Border:

Left Border:

Edge & Core Behavior

Edge Slice Scaling Strategy:

Render Center Fill Patchborder-image: fill

Real-Time HTML5 Canvas EngineZero Remote Latency

Interactive Visualizer & Slicing Canvas

Subdivided 9 Zones

100%

Source Slice Boundary Editor (Drag Handles)64w × 64h

T:16

B:16

L:16

R:16

Interactive Slicer View

Target Scaling Resolution240 × 140 px

Target Width (px):

Target Height (px):

Arbitrary Aspect Scaled Output Corner Geometry Preserved

STRETCH MODE ACTIVE

Render: 240 × 140 px

Generated Border Spec & Code

/* CSS border-image 9-Slice Definition */
.scalable-panel {
  border-style: solid;
  border-width: 16px 16px 16px 16px;
  border-image-source: url("scifi-panel-ui.png");
  border-image-slice: 16 16 16 16 fill ;
  border-image-repeat: stretch;
  border-image-outset: 0;
}

CSS border-image / Godot NinePatch / Unity Slicedscifi-panel-ui.png

The Architecture of 9-Slice Scaling: Solving Responsive 2D UI Distortion

In modern video games, mobile apps, and responsive web applications, user interface panels rarely adhere to static dimensions. Dialog boxes expand to accommodate variable text strings, inventory windows scale across desktop and mobile displays, and HUD buttons dynamically flex based on localization lengths. Conventional uniform bitmap scaling catastrophically degrades these graphics by stretching rounded corners into oval distortions and smearing drop shadows:

W_dest = L + W_center + R | H_dest = T + H_center + B

W_center(dest) = max(0, W_dest − L − R) | H_center(dest) = max(0, H_dest − T − B)

s_x = W_center(dest) / W_center(src) | s_y = H_center(dest) / H_center(src)

Invariant Feasibility Condition: W_dest ≥ L + R and H_dest ≥ T + B

4 Invariant Corners

The four outer quadrants (Top-Left, Top-Right, Bottom-Left, Bottom-Right) retain absolute 1:1 pixel fidelity: s_x = s_y = 1.0. Their coordinate width and height never stretch or compress regardless of container size.

4 1D Elastic Edges

The top and bottom edges scale strictly across the horizontal X-axis (s_x = W_center(dest) / W_center(src), s_y = 1.0), while left and right borders scale strictly across the vertical Y-axis (s_x = 1.0, s_y = H_center(dest) / H_center(src)).

1 2D Scalable Core

The central patch expands in both X and Y dimensions (s_x × s_y) using bilinear interpolation or pattern tiling to fill the interior body, or it can be left transparent for window frames.

Slice Coordinate Mathematical Breakdown

Given source bitmap dimensions W_src × H_src and four border guide margins (T, R, B, L), the graphics engine maps the nine source bounding boxes [s_x, s_y, s_w, s_h] into destination target rectangles [d_x, d_y, d_w, d_h]:

// Center Zone Coordinate Formulation

SourceCenter = {

s_x: L,

s_y: T,

s_w: W_src − L − R,

s_h: H_src − T − B

};

DestinationCenter = {

d_x: L,

d_y: T,

d_w: W_dest − L − R,

d_h: H_dest − T − B

};

Patch Zone	Role	Source Rect [s_x, s_y, s_w, s_h]	Dest Rect [d_x, d_y, d_w, d_h]	Scale Deformation
Top-Left	Corner	[0, 0, L, T]	[0, 0, L, T]	1:1 Rigid (Invariant)
Top-Center	Horizontal Edge	[L, 0, W_src − L − R, T]	[L, 0, W_dest − L − R, T]	1D Stretch (X-Axis)
Top-Right	Corner	[W_src − R, 0, R, T]	[W_dest − R, 0, R, T]	1:1 Rigid (Invariant)
Center-Left	Vertical Edge	[0, T, L, H_src − T − B]	[0, T, L, H_dest − T − B]	1D Stretch (Y-Axis)
Center-Body	Interior Fill	[L, T, W_src − L − R, H_src − T − B]	[L, T, W_dest − L − R, H_dest − T − B]	2D Stretch / Tile (X & Y)
Center-Right	Vertical Edge	[W_src − R, T, R, H_src − T − B]	[W_dest − R, T, R, H_dest − T − B]	1D Stretch (Y-Axis)
Bottom-Left	Corner	[0, H_src − B, L, B]	[0, H_dest − B, L, B]	1:1 Rigid (Invariant)
Bottom-Center	Horizontal Edge	[L, H_src − B, W_src − L − R, B]	[L, H_dest − B, W_dest − L − R, B]	1D Stretch (X-Axis)
Bottom-Right	Corner	[W_src − R, H_src − B, R, B]	[W_dest − R, H_dest − B, R, B]	1:1 Rigid (Invariant)

9-Slice Implementation Across Modern Graphics Engines & Frameworks

While the underlying mathematical coordinate model is uniform across all graphics pipelines, implementation syntax varies between CSS, game engines, and mobile application frameworks:

Platform / Engine	Primary Native API	Coordinate Inset Order	Key Feature / Advantage
CSS3 / Web Browsers	border-image-slice	Top, Right, Bottom, Left (Clockwise)	Native hardware acceleration without DOM wrapper bloat
Godot Engine 4.x	NinePatchRect	patch_margin_left, top, right, bottom	Built-in horizontal and vertical axis tile modes
Unity 3D / UI Toolkit	Image.Type.Sliced	Left, Bottom, Right, Top (Sprite Editor)	Batch-renderable mesh generation for canvas draw calls
Android SDK	NinePatchDrawable (.9.png)	1px perimeter guide line encoded in bitmap	Supports independent content padding zones
Apple UIKit / iOS	resizableImageWithCapInsets	UIEdgeInsets(top, left, bottom, right)	Seamless integration with Auto Layout constraints

Engineering Guidelines for High-Performance 9-Slice Assets

Optimizing sliced bitmap assets requires balancing visual aesthetics with minimal texture memory footprints. Follow these core engineering best practices:

Geometric Inset Feasibility: L + R ≤ W_src | T + B ≤ H_src

Asset Design Best Practices

• Minimize Redundant Edge Length: Keep repeatable or stretchable center slices as narrow as 1 to 2 pixels in source art to dramatically reduce download payloads.
• Ensure Guide Symmetry on Homogeneous Frames: Set equal margins for top, right, bottom, and left unless an explicit visual anchor (like an arrow tip) requires asymmetry.
• Use `image-rendering: pixelated` for Retro Sprites: When developing pixel art games or nostalgic UI themes, enforce nearest-neighbor sampling to avoid unwanted bilinear blur on borders. If your source sprite was authored at tiny native dimensions (such as 16×16px), scale the master asset through our pixel art sprite scaler first to preserve razor-sharp texels prior to configuring slice guide margins.

Critical Pitfalls to Avoid

• Overlapping Inset Sums: Never allow the sum of Left + Right slices to exceed the source image width (L + R > W_src), or Top + Bottom to exceed image height (T + B > H_src), as this breaks raster subdividers.
• Omitting the CSS `fill` Keyword: Forgetting the `fill` modifier in `border-image-slice` will leave the interior element hollow, causing background content to show through unexpectedly.
• Targeting Smaller Dimensions Than Slice Margins: If a container is smaller than Left + Right or Top + Bottom (W_dest < L + R), corners will overlap or scale down unpredictably unless clamped by min-width rules.

Frequently Asked Questions (FAQ)

What is 9-slice scaling and how does it prevent UI distortion?

9-slice scaling (also known as 9-patch, scale grid, or sliced borders) is a 2D graphics scaling technique that subdivides a bitmap into nine discrete zones: 4 immutable corners, 4 horizontally or vertically stretching edges, and 1 scalable center patch. This enables UI frames, dialog boxes, and buttons to resize dynamically without stretching or blurring rounded bevels and decorative corner art.

How does CSS border-image implement 9-slice scaling natively in browsers?

The CSS border-image specification uses the border-image-slice property to define four inset offsets: top, right, bottom, and left. Adding the "fill" keyword instructs the browser to retain and scale the center patch alongside the outer borders. Paired with border-image-repeat: stretch, repeat, or round, web elements scale flawlessly without multi-nested HTML wrappers.

Are my game sprites or UI graphics uploaded to any remote server?

No. All slice mathematical partitioning, HTML5 Canvas blitting, and code generation execute 100% locally in your browser DOM. Your assets never leave your computer.

What is the difference between stretch, repeat, and round slice modes?

Stretch pulls and interpolates the edge pixels across the target dimension. Repeat tiles the slice repeatedly, potentially clipping partial tiles at borders. Round tiles the slice pattern and mathematically adjusts the pattern width or height slightly so that only whole, unclipped tiles are rendered.

How do I use these exported slices in game engines like Godot and Unity?

In Godot, assign the generated patch margins to a NinePatchRect node. In Unity, open the Sprite Editor on your sliced texture, enter the left, bottom, right, and top pixel borders, and change the UI Image component type to "Sliced".

Can I test non-square and asymmetric 9-slice images?

Yes. This tool supports arbitrary rectangular dimensions. You can set asymmetrical guide values for top, right, bottom, and left to support dialogue balloons with anchor tails, asymmetric tabs, or complex header frames.

Related & Complementary Utilities

Explore more privacy-first client-side web tools.

View All Category Tools

SVG to Pure CSS Background Code Formatter

Convert, optimize, and encode raw SVG markup into zero-latency CSS background Data URIs and Tailwind classes.

Open Utility

Image Color Palette & Dominant Hex Extractor

Extract dominant colors, calculate hex, RGB, HSL, and CMYK swatches, sample pixels with interactive eyedropper, and export design palettes.

Open Utility

Canvas 2D Shadow & Isometric Perspective Projector

Project 2D graphics, vector badges, and UI mockups into true 3D isometric perspectives with cast planar shadows and depth extrusions using client-side HTML5 Canvas matrix math.

Open Utility

Image Resizer & Pixel Dimensions Scaler

Batch scale pixel dimensions, lock aspect ratios, and optimize web graphics locally using high-performance browser canvas rendering.

Open Utility