ANIPIXELS
Free tool

UI kit preview: resize 9-slice buttons and panels live

Pick a piece from the Crisp Kit (casual), Crisp Quest (fantasy RPG) or Crisp Pixel (pixel-art RPG) free sampler and drag it to any size. The corners stay sharp and only the middle stretches, exactly as the 9-slice borders in each sampler's sheets.json say. Use it to check a piece at the size you need, and to read off its border values.

Kit
Background
Zoom

Selected piece

Name
Size
Type
Borders
Files
Note

Sampler pieces

Crisp Kit free sampler: 57 pieces. Download the sampler (PNG 1x + 2x, SVG) on itch.io - Full kit: 1255 images, $6.99 - About Crisp Kit

Mint theme pieces (26)

Colour pieces (3)

White icons (20)

Input prompts (light style) (8)

Crisp Quest free sampler: 52 pieces. Download the sampler (PNG 1x + 2x, SVG) on itch.io - Full kit: 1141 images, $6.99 - About Crisp Quest

Carved Wood theme pieces (34)

White icons (15)

Colour icons (3)

Crisp Pixel free sampler: 53 pieces. Download the sampler (PNG 1x to 4x) on itch.io - Full kit: 991 images, $6.99 - About Crisp Pixel

Oak & Brass theme pieces (35)

Colour icons (16 x 16) (18)

How it works

  • A 9-slice piece is cut by four border lines into nine regions. The four corners are drawn at their own size, the edges stretch in one direction and the middle stretches in both.
  • This page draws each piece with CSS border-image, using the slice_1x and slice_2x values from the sampler's sheets.json unchanged. The same four numbers go into the nine-slice or nine-patch settings of Godot, Unity, GameMaker, Construct or Phaser.
  • Pieces marked 3-slice have no top or bottom border: they stretch sideways only and keep their height.
  • Fixed-size pieces (icons, check boxes, knobs, prompts) have no borders and are shown at their own size.
  • Crisp Pixel is pixel art: its pieces are drawn from the 1x PNGs and enlarged by whole numbers with image-rendering: pixelated, so no pixel is smoothed. Do the same in your engine: whole-number scales with texture filtering off.
  • The text label on buttons sits inside the piece's content_padding_1x from sheets.json. The label is drawn by your browser; no font is included in the kits.
  • Keyboard: focus the round handle and use the arrow keys to resize (hold Shift for bigger steps), or use the width and height sliders.

About the pieces

These are the 162 pieces of the three free samplers (57 from Crisp Kit, 52 from Crisp Quest, 53 from Crisp Pixel); 76 of them are 9-slice or 3-slice. The page shows the 2x PNGs of the Crisp Kit and Crisp Quest samplers and the 1x PNGs of the Crisp Pixel sampler. The samplers on itch.io also contain the other PNG sizes and, for Crisp Kit and Crisp Quest, the SVGs. The full kits (all themes, all icons, Godot 4 themes) are sold on itch.io and are not on this site.

Licence: Use the graphics in any number of commercial or non-commercial projects (games, apps, websites, videos, streams, game jams). Edit, recolour, resize or otherwise modify them. Credit is appreciated but never required. You may not resell, redistribute or give away the graphics themselves, on their own or as part of another asset pack, UI kit or template, modified or not, and you may not claim them as your own original work in an asset pack.

Every piece is drawn procedurally by code that was written with the help of Claude, an AI assistant. No AI image generators, no traced or third-party art.