MinecraftMaps.com

HUD Customizer - Crosshair & Hearts

Design a custom crosshair, recolor your hearts, hunger and XP bar, and build a Java resource pack or a Bedrock .mcpack. Runs entirely in your browser, no upload.

A - Crosshair

Click or drag on the 15 x 15 grid to paint your crosshair. Empty cells stay transparent, so the crosshair keeps its shape over the world.

Tool
Color

Minecraft inverts what's behind the crosshair, so colors don't show the way you paint them. White flips the colors underneath, black is invisible and #808080 stays gray everywhere. The preview below matches the game.

In-game preview
Rendering preview...
B - Health hearts

Recolor the heart while keeping its Minecraft shape and shading. The empty heart background is left vanilla so you can still read your health.

#3B82F6
Health preview
Rendering preview...
C - Hunger bar

Recolor the drumstick, keeping its shading. The empty hunger slot stays vanilla.

#9A6A3C
Hunger preview
Rendering preview...
D - XP bar

Recolor the experience bar with one color or a left-to-right gradient. The shading of the vanilla bar is preserved.

Color A (left)
Color B (right)
The XP level number above the bar stays vanilla green in game. Minecraft draws that number as text, not a texture, so a resource pack cannot recolor it - only the bar. The number in the preview below is tinted for show only.
XP preview
Rendering preview...
Pack settings
Edition
Custom HUD
Get a link to this design. Sign in to keep it and publish it. Browse HUDs
100% local, 100% private

Everything you make stays on your device. The crosshair painting and every recolor happen here in your browser on a canvas; this page makes no network requests with anything you create.

Customize Your Minecraft HUD

A HUD pack swaps the small sprites Minecraft draws on screen for your own: the crosshair, the hearts, the hunger drumsticks and the XP bar. Paint a crosshair pixel by pixel, recolor the hearts and hunger, fade the XP bar between two colors, and download one Java resource pack. It all happens in your browser, so nothing uploads and there is no watermark.

The crosshair designer is a 15 by 15 pixel grid, the same size as the vanilla sprite. Load the real crosshair as a starting point, then paint, erase and recolor each pixel. Empty cells stay transparent, so your crosshair sits cleanly over the world.

Only the sections you leave switched on are written into the pack, and each changed sprite goes to its exact path under assets/minecraft/textures/gui/sprites/hud/, so the game picks them up with no extra setup.

Recolored Hearts, Hunger and a Custom XP Bar

The recolor keeps the original shape and shading. For each pixel it measures the brightness of the vanilla sprite and multiplies your chosen color into it, so the heart still has its highlight and shadow and just changes hue. That is why blue hearts look like real Minecraft hearts and not a flat blue blob. The same technique recolors the hunger drumsticks.

The XP bar can be a single color or a 2-stop gradient that fades from left to right, again multiplied by the bar's own shading. One honest caveat: the XP level number above the bar stays vanilla green in game. Minecraft renders that number as text, not a texture, so a pack can recolor the bar but never the number. The preview tints the number only to show your color.

You can also export just the raw PNGs at their relative paths, ready to drop into a resource pack you already maintain. Java supports every element, including the custom crosshair. Bedrock is supported too: switch the edition toggle and the tool builds a .mcpack that recolors the hearts, hunger and XP bar at their textures/ui/ paths. The crosshair and hardcore hearts have no standalone Bedrock texture, so they stay Java-only.

Community custom huds

See all 24

Open any of these in the HUD Customizer to change it. Save your own with the Save & share button above, then publish it to the custom huds gallery.

Emerald HUD - HUD

Emerald HUD

crosshair, hearts, hunger, XP bar, Java

by Syphon
Steel HUD - HUD

Steel HUD

crosshair, hearts, hunger, XP bar, Java

by Syphon
Coral HUD - HUD

Coral HUD

crosshair, hearts, hunger, XP bar, Java

by Syphon
Amethyst HUD - HUD

Amethyst HUD

crosshair, hearts, hunger, XP bar, Java

by Syphon
Lime HUD - HUD

Lime HUD

crosshair, hearts, hunger, XP bar, Java

by Syphon
Bubblegum HUD - HUD

Bubblegum HUD

crosshair, hearts, hunger, XP bar, Java

by Syphon
Slate HUD - HUD

Slate HUD

crosshair, hearts, hunger, XP bar, Java

by Syphon
Copper HUD - HUD

Copper HUD

crosshair, hearts, hunger, XP bar, Java

by Syphon
Night HUD - HUD

Night HUD

crosshair, hearts, hunger, XP bar, Java

by Syphon
Candy HUD - HUD

Candy HUD

crosshair, hearts, hunger, XP bar, Java

by Syphon
Start from scratch

Frequently Asked Questions

How do I make a custom crosshair in Minecraft?

Open the crosshair section, load the vanilla crosshair as a starting point or start from blank, then click and drag on the 15 by 15 grid to paint each pixel. Pick a color, use the eraser for transparent pixels, and the live preview shows it over sky, sand, stone and deepslate the way the game draws it. Turn the section on, build, and the pack replaces the crosshair sprite with your design.

Why is my custom crosshair transparent or the wrong color?

Minecraft doesn't draw the crosshair as a normal picture. It inverts whatever is behind it, which is why the vanilla white crosshair turns dark against the sky. A colored pixel only shifts the colors under it and a black pixel changes nothing, so a black crosshair is invisible in game. Paint with white for the vanilla look, or #808080 gray, the one color that looks the same over everything. A resource pack can't switch the inversion off because it's set in the game's code, not in a texture. The tool's preview uses the same blend, so what it shows is what you'll get.

How do I recolor the hearts and hunger bar?

Pick a preset color or use the custom color picker. The tool keeps the original Minecraft shape and shading and just changes the color, by multiplying your color into each pixel's brightness, so the highlights and shadows stay intact. It recolors the full and half hearts (and the hardcore hearts if you leave that on) and the hunger drumsticks. The empty heart and hunger backgrounds stay vanilla so you can still read your stats.

Why does the XP level number stay green?

Minecraft draws the experience level number above the bar as text, not as a texture, so no resource pack can recolor it. A pack can only change the bar itself, which is what this tool does. The preview tints the number to show your color choice, but in game the number stays vanilla green.

Does this work on Bedrock Edition?

Yes, with fewer elements. Switch the edition toggle to Bedrock and the tool builds a .mcpack that recolors the hearts, hunger and XP bar at their Bedrock paths under textures/ui/ (heart.png, heart_half.png, hunger_full.png, hunger_half.png and experiencebarfull.png). Bedrock uses a different GUI layout, so two things stay Java-only: the custom crosshair lives inside a shared spritesheet with no standalone PNG to swap, and Bedrock has no separate hardcore heart texture. The Bedrock XP bar is a solid recolor because its tiled bar has no left-to-right gradient. Java still supports everything including the crosshair.

Can I add only one part, like just the crosshair?

Yes. Each of the four sections (crosshair, hearts, hunger, XP bar) has its own include toggle, and only the sections you leave on are written into the pack. So you can ship just a crosshair, just recolored hearts, or any combination.

Are my designs uploaded anywhere?

No. The crosshair painting, every recolor, and the pack packaging all run in your browser on a canvas. The page makes no network requests with anything you create, so your designs never leave your device and there is no watermark.

Make a custom totem next, or browse more Minecraft tools:

Totem GeneratorBrowse All Tools