Inset Lab — PNG Nine-Slice Source Kit

Test how your own PNG border stretches while its corners keep their source dimensions. Free original PNG/CSS/JSON example: https://single-clip-studio-demos.blithepony4.chatgpt.site/#inset-lab

Editable HTML/CSS/JavaScript tool with static PNG import, numeric inset and output-size controls, cut guides, nearest-neighbor Canvas output and native CSS border-image comparison. Download resized PNG, re-encoded source PNG, CSS and JSON rectangles/settings. Includes an original 24px frame, actual exported 192x96 example and standalone HTML in a 13-file ZIP. $4 source kit with no build dependencies.

Import static PNG only, up to 1024x1024 and 8 MiB. Output up to 2048x2048. Insets must leave a center pixel in source and output. Stretch only: no repeated edges, atlas regions, trim/rotation, automatic cuts, APNG, SVG, Android .9.png parsing or engine importer. CSS uses fixed pixel dimensions and a filled center; add your own labels, content layout and behavior. JSON is not an importable project. No automatic saving. PNG export re-encodes to Canvas RGBA and discards metadata; browser color handling can affect imported images.

Actual PNG/CSS/JSON exports checked, including asymmetric geometry and all 12800 output pixels against an independent image assembly, fixed corners, transparency, rejected imports and narrow layout. Exported CSS rendered in the available browser; other browser engines, physical mobile, direct file launch and engine integration unverified. Free CSS generators and Godot NinePatchRect offer alternatives. This is a compact editable implementation, not a UI art library.

AI-assisted original code, frame and cover; no Pocket Panels reuse or third-party assets, no exclusive copyright promised. Personal/commercial reuse permitted; do not resell the unchanged kit. Local processing, no network calls or analytics. Checkout uses USDC on Solana; a funded compatible wallet is required. No card checkout configured.