SVG Badge & Placeholder
Create Shields-style SVG badges or placeholder images locally and export them as SVG or PNG.
This tool runs entirely in your browser. Your input is never uploaded.
Check the label color and value color are valid hex colors.
What is this tool?
Small status badges and placeholder images show up everywhere in README files, dashboards, and mock-ups. This tool draws them locally in your browser so you can style and export them without uploading anything.
Badge
Type a label and a value, pick two colors, and get a Shields-style badge instantly. Choose flat corners for a sharper look. Copy the SVG source, download the .svg, or rasterize it to a PNG.
Colors are hex values such as #555555 or #4c1. Badges are built as crisp vector SVG, so they stay sharp at any size.
Placeholder
Generate an image with a custom size, background color, text, and text color for mock-ups and wireframes. The preview renders on a canvas; download it as PNG or copy its data URL.
Privacy
Everything is generated locally. Badges and placeholders never leave your browser.
Related tools
Color Converter
Convert colors, generate palettes, and check WCAG contrast locally.
Open ToolImage Color Extractor & Picker
Pick colors from any image with a magnifier, copy HEX, RGB, and HSL, extract the dominant palette, and export ASE, JSON, CSS, GIMP, or PNG.
Open ToolQR Code Generator and Scanner
Generate QR codes or scan them from images entirely in your browser.
Open Tool