Design badges and shields with customizable shapes, text, icons, and ribbon elements.
This tool builds a badge or shield emblem out of stacked layers: pick a base shape such as a shield, circle, star, or hexagon, then add a headline, a subtitle, an icon, and an optional ribbon banner across the bottom, adjusting color, size, and position for each layer on its own. It suits quick emblem mockups - certification seals, award badges, club crests, completion stamps - rather than press-ready heraldic art. The detail people miss most: a ribbon banner's text runs along a fixed-length curved or angled path, so a long phrase gets squeezed, wrapped, or clipped well before it looks visually broken on screen.
The badge is assembled from independent layers: an outer shape (shield, circle, star, hexagon), an inner seal or icon, a text layer for headline and subtitle, and an optional ribbon banner, each with its own fill color, stroke, and position. Changing one layer's color or size does not move or resize the others, so centering an icon or matching a ribbon's two tails takes a manual check after each edit.
Ribbon and banner elements render their text along a fixed-width curved or angled path rather than a straight line that can grow with the string. Short words center cleanly; longer phrases get compressed, auto-shrunk, or clipped at the ribbon's edges because the path length does not expand. Shortening the wording or switching to a wider ribbon shape are the two ways to recover legibility once text starts crowding the edges.
Based on the tool's description, it ships with a preset icon library rather than a custom-upload path, so you choose from included icons rather than importing artwork directly. If you need a specific logo, the practical workaround is to export the badge and composite your logo onto it afterward in a separate image editor.
Not reliably. Badges built around a bold, few-color base shape hold up well, but thin text, fine icon detail, or a long ribbon phrase tends to blur or disappear once scaled down. Export at the actual size you plan to display it and check that copy directly rather than assuming the full-size design scales cleanly.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.