UI Packs

Aqua HUD Bars — health, mana and stamina

A glassy teal nine-slice bar frame with three glossy fills and a segmented variant, sized 160×24 with 8 px caps. SVG plus transparent PNG.

  • ui
  • svg
  • transparent png
  • hud
  • health bar
  • progress bar
  • nine-slice
  • glass
  • underwater
  • dark ui
  • sci-fi
Three horizontal game status bars stacked on a checkerboard background, filled to different levels for health, mana and stamina, with a segmented 10-notch bar and three smaller bars beneath them
1600×880 previewtransparency shown as checkerboard

About this pack

Bars with the same hard gloss split as the panels, on the shared 160x24 base so they drop into a Slate screen without being resized. The split sits above the fill rather than across it: a highlight drawn over a coloured fill turns a red bar pink and a blue bar grey, which is the one thing a status bar cannot afford.

The frame is a nine-slice with 8 px end caps, so it stretches to any width without the ends deforming — a full-width boss bar and a 40 px enemy nameplate bar use the same file.

The fills are separate sprites rather than baked into the frame, which is the part that matters in practice: you scale the fill's width from zero to full and the frame never moves. Each fill splits at the halfway line with a hard edge rather than a gradient, which is what reads as glass without costing a single soft pixel at 1x.

There are three colours, one per resource: health, mana and stamina. They are spaced apart in brightness as well as hue, which is the part that survives a greyscale screenshot and the most common forms of colour blindness. A set tuned to identical lightness looks balanced in a swatch row and collapses into one grey block on screen.

The segmented variant adds 9 notch lines over the same frame, for games that count discrete pips — hearts, charges, ammo — rather than a continuous percentage. It is a separate file rather than an overlay, so you can drop it in without changing your bar widget. Everything is included as editable SVG and as flat transparent PNG at 1x, 2x and 4x.

Download

Direct link · no sign-up · no wait page
Download ZIP19 kB

Complete kit — SVG sources, PNG exports at 1x/2x/4x, licence and readme

Files included in this pack
FileFormatSizeDownload
Complete kit — SVG sources, PNG exports at 1x/2x/4x, licence and readmeZIP19 kBGet →
Bar frame, editable SVGSVG575 BGet →

How to use it

  1. Draw the frame first, then the fill on top with its left edge inset by the 8 px cap width; animating only the fill's width keeps the frame's ends perfectly still.
  2. In Unity, set the fill image to Image Type Filled with Fill Method Horizontal, or use a Sliced image and animate the RectTransform width — both work because the fill has no rounded corners of its own.
  3. In Godot 4, a TextureProgressBar with the frame as Under Texture and the fill as Progress Texture reproduces the whole thing with no code, and Stretch Mode set to Tile keeps the caps intact.
  4. For pip-style resources, use the segmented frame and snap the fill width to multiples of one tenth of the inner width so the fill edge always lands on a notch.

License

Creative Commons Attribution 4.0 — Free for commercial use. Credit required. Full terms · What this means in practice

Copy-paste credit line
"Aqua HUD Bars — health, mana and stamina" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/aqua-hud-bars