Guide · 9 minute read

How to design a beautiful barcode that still scans

A practical walkthrough of every format the tool supports, what shape masking actually does to the encoding, and working samples you can scan right now with your phone.

A barcode is supposed to be invisible. It sits on the back of the box, does its one job at the checkout and nobody looks at it twice. But that works against you when your product is the kind that lives on a shelf, a storefront or a feed where everything is photographed. A beige rectangle of vertical lines reads as generic, or worse, cheap. Barcode Pro was built so you do not have to choose between a code that scans and a code that looks like it belongs to your brand.

The tool runs entirely in the browser at barcode.fitinview.com. You paste a value, pick a format, tweak the color, optionally apply a shape, and the live preview updates. A real decoder runs against every render in the background. You only see a PASS badge when a scanner would actually read it, and a FAIL badge the moment your styling goes too far.

What Barcode Pro actually does

At the center of the tool is an encoder. When you type 9780201379624 and pick EAN-13, the page uses JsBarcode to calculate the correct pattern for that value under the official EAN-13 standard. The result is a set of bar widths and positions stored as SVG rectangles. Those bars are the part that matters to a scanner. The width of each dark bar and each gap between them is what encodes the digits.

Everything after that is cosmetic. The bars get rounded corners if you ask for them. They get filled with a gradient, a neon glow, a luxury gold, or any hex color you type into the circular color wheel. They are cropped to the outline of a silhouette if you enable shape mode. None of that touches the widths themselves, which means the encoded message is preserved exactly as the standard requires.

The second half is the safety net. Every time the preview changes, the SVG is rasterized to an offscreen canvas at 2400 pixels wide and fed to the ZXing library, the same decoder engine used inside dozens of retail scanning apps. If ZXing can read it, the badge under the preview turns green and shows the decoded text. If not, it turns red and you adjust. No more finding out at the printer that your gorgeous holiday packaging will not ring through at the till.

The seven formats, what they are for, and working samples

You get seven formats. Each one encodes a different kind of value and is used for a different kind of product.

Code 128

The general purpose workhorse. It handles letters, numbers and symbols, and it compresses efficiently. Use this when you have an internal SKU, a batch code, a ticket number, or anything that is not a retail EAN. Most warehouse systems default to Code 128.

EAN-13

The thirteen digit barcode you see on every grocery store item in Europe and most of the world. The first three digits identify the country of origin, the next block identifies the manufacturer, and the final block is the product number plus a check digit. If you are selling a physical product through retail, this is almost certainly what your distributor wants.

UPC-A

The twelve digit version used in North America. It is functionally the same family as EAN-13 and modern scanners accept either, but some US retail systems still reject EAN-13 at the register. When in doubt, ask the buyer which they want printed.

EAN-8

A shorter eight digit variant for very small packaging where a full EAN-13 would be too wide. Candy, single serve coffee pods, lipstick tubes. You typically apply for an EAN-8 assignment separately from your main EAN-13 block.

Code 39

An older industrial standard that still shows up in US government logistics, automotive parts and some inventory systems. It accepts uppercase letters, numbers and a few symbols, and it is very forgiving on cheap printers, which is why it outlived newer alternatives in some niches.

ITF-14

Interleaved two of five, fourteen digits. This is the barcode on shipping cartons and trade units, not on individual retail items. If you are shipping a case of twelve bottles to a distributor, the box gets an ITF-14 that encodes the inner EAN-13 plus a quantity indicator.

QR Code

Two dimensional. It carries URLs, plain text, contact cards, wifi credentials or almost any payload you want. QR codes are read by phone cameras instantly and they are the right choice for menus, event tickets, product pages, promo links and anything you want the customer to interact with after they have the physical item in hand.

Shape masking without breaking the encoding

The most distinctive feature of the tool is the shape mode. You turn it on, pick a silhouette from the library, type an emoji, or upload an image. The bars are then drawn only where that silhouette is solid, which lets you print a barcode that looks like a heart, a bottle, an elephant, a coffee cup, your logo, or almost anything else with an enclosed outline.

The trick to keeping it scannable is that a small solid rectangular strip is rendered below the shape. That strip is a clean, full width, full quiet zone rendering of the same code. Phone scanners walk the image looking for a horizontal line of alternating dark and light regions, and they always find the strip because nothing is obscuring it. The shape above the strip is pure decoration. This is how you get a barcode that looks like a hand drawn illustration yet still rings through at checkout.

The emoji library uses imagetracerjs to convert the rendered glyph into an SVG path on the fly. Any emoji your browser can render is available, which is roughly three thousand six hundred at this point. The search box inside the tool filters the full Unicode emoji database by name, so typing cat narrows the grid to 22 feline glyphs.

Realistic use cases

Why everything is validated

Every tool of this kind has one real problem: you can style a barcode into something unreadable without noticing. Decoders are demanding about contrast, about the quiet zone on either side, and about how far the visual dark regions align with the mathematically correct bar widths. We considered adding warnings about each of those pitfalls, and instead chose a single rule: run the decoder, trust the result. That is why there is always a green or red badge under the preview. You never have to guess whether an aggressive gradient, a tight shape, or a low contrast color combination will pass. You see the outcome in real time.

Pricing and access

The tool is free to explore. Every format, every shape, every color, every preset, every emoji and the upload flow all work without an account. Scan verification runs on every render whether you are signed in or not. The only feature behind a paywall is exporting the artifact, meaning the Download SVG and Copy SVG markup buttons.

Pro access is 5 US dollars per month, billed through Stripe. One click subscribes you, a passwordless email link logs you back in, and the cancel button lives inside the Stripe customer portal so you are never wondering how to stop the charge. You keep access until the end of the paid period, no hostage tactics. See the pricing section on the main page for the short version.

Get started

Open the studio, paste a value, pick a format, and watch the scan badge turn green. If you want something that looks like it belongs on a premium product, turn on shape mode and pick a silhouette. When the result is what you want, subscribe and download the SVG. That is the entire workflow.