Markdown Badge Generator
Build a shields-style badge locally — the SVG is generated here, not fetched — then copy it as Markdown, HTML, reStructuredText, inline SVG or a hosted shields.io URL.
Live preview
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="20" role="img" aria-label="build: passing"><title>build: passing</title><rect width="96" height="20" rx="3" fill="#44cc11"/><rect width="42" height="20" fill="#555"/><text x="21" y="14" fill="#fff" text-anchor="middle">build</text><linearGradient id="labelShine" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><rect width="42" height="20" fill="url(#labelShine)" rx="3"/><linearGradient id="messageShine" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><rect x="42" width="54" height="20" fill="url(#messageShine)" rx="3"/><text x="69" y="14" fill="#fff" text-anchor="middle">passing</text><style>text{font-family:Verdana,Geneva,DejaVu Sans,sans-serif;font-size:11px;font-weight:700}</style></svg>
<img alt="build: passing" src="https://img.shields.io/badge/build-passing-44cc11?style=flat">
.. image:: https://img.shields.io/badge/build-passing-44cc11?style=flat :alt: build: passing
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="20" role="img" aria-label="build: passing"><title>build: passing</title><rect width="96" height="20" rx="3" fill="#44cc11"/><rect width="42" height="20" fill="#555"/><text x="21" y="14" fill="#fff" text-anchor="middle">build</text><linearGradient id="labelShine" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><rect width="42" height="20" fill="url(#labelShine)" rx="3"/><linearGradient id="messageShine" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><rect x="42" width="54" height="20" fill="url(#messageShine)" rx="3"/><text x="69" y="14" fill="#fff" text-anchor="middle">passing</text><style>text{font-family:Verdana,Geneva,DejaVu Sans,sans-serif;font-size:11px;font-weight:700}</style></svg>Colour
Resolved colour: #44cc11 · message text is white for contrast.
Style
Real icon glyphs need an external image, which this offline tool will not fetch — so the icon is rendered as text measured with getComputedTextLength() and given its own padded block.
About this tool
The badge is real, self-contained SVG: five template shapes (flat, flat-square, plastic, for-the-badge, social), measured text, a gradient sheen for the plastic variant, and a WCAG luminance check that picks black or white message text. Named shields colours resolve to their documented hex values, and you also get a hosted shields.io URL for Markdown, HTML and reStructuredText if you would rather link than embed. Everything is built locally in your browser — no request ever leaves the page.
- 100% free — no account needed
- Runs in your browser
- Nothing is uploaded
Frequently asked questions
Is Markdown Badge Generator really free?
Yes. Markdown Badge Generator is completely free on PureBrowser — every feature, with no account, no trial, and no credit card.
Does Markdown Badge Generator upload my data?
No. Markdown Badge Generator runs entirely inside your browser, so anything you type, paste, or open stays on your own device.
Do I need to sign up or install anything?
Neither. There is no account and nothing to download — open the page and Markdown Badge Generator is ready to use on desktop or mobile.
Does Markdown Badge Generator work offline?
Once the page has loaded, yes. All of the processing happens locally in your browser, so it keeps working without a connection.
More text tools
Character Counter
Count characters, words, and sentences with platform limits.
Social Character Counter
Check text length for X, LinkedIn, and Instagram limits.
Instagram Line Break Generator
Add invisible line breaks to Instagram bios and captions so each line displays on its own row.
Lorem Ipsum Generator
Generate placeholder text in standard, funny, or tech styles.
Text Repeater
Repeat any text with custom separators and transforms.
WhatsApp Text Formatter
Format bold, italic, strikethrough, and monospace for WhatsApp.