Free UI assets for Web (HTML & CSS)

1. Drop in the PNGs

No build step needed — the pack's png/ folder is plain transparent PNGs. Put them wherever your static assets live.

2. 9-slice a panel with border-image

border-image-slice takes unitless numbers meaning pixels of the source image; border-width takes the rendered thickness. Use the manifest values for both when you want 1:1 scale.

.panel {
  border-style: solid;
  border-width: 24px;                        /* rendered thickness */
  border-image-source: url("png/panel_main.png");
  border-image-slice: 24 24 24 24 fill;      /* source px + keep the centre */
  border-image-repeat: stretch;              /* or "round" for tiled patterns */
}

3. Button states

Swap border-image-source on :hover, :active and :disabled. Because the geometry is identical across states, nothing shifts and there is no layout thrash.

.btn        { border-image-source: url("png/button_primary_normal.png"); }
.btn:hover  { border-image-source: url("png/button_primary_hover.png"); }
.btn:active { border-image-source: url("png/button_primary_pressed.png"); }
.btn:disabled { border-image-source: url("png/button_primary_disabled.png"); }

4. High-DPI screens

The assets are authored at 2× the nominal size. To render them crisply at 1× logical pixels, halve the border-width while leaving border-image-slice at the source pixel values — the slice always refers to the source image, the width to the rendered box.

5. Pixel-art packs

Add image-rendering: pixelated to keep the edges hard when scaling. Browsers otherwise smooth them.

FAQ

The centre of my panel is see-through.

You are missing the fill keyword on border-image-slice. See the warning at the top of this page.

Can I use these with Tailwind?

Yes — put the rules in a component class via @layer components, or use arbitrary properties. Tailwind has no border-image utilities, so a small CSS block is the practical route.

Can I use these on a commercial site or web game?

Yes. Free for commercial use, no attribution required. See the license page.