QR Code Styling: Shapes, Eyes, Gradients & Frames

The short answer

QR code styling is the layer of design choices that change how a code looks without changing what it encodes: the shape of the data modules (square, rounded, dots), the shape and colour of the three finder eyes, solid or gradient fills, and the frame and caption around the code. Every one of those choices trades a little readability for a lot of brand fit, and every one has a scannability rule that keeps it safe. The single governing principle is the same one behind our qr code design guide: a styled code that won’t scan is a failed design, so you add styling one layer at a time and scan-test after each change.

This page is the deeper styling companion to the qr code design page (which covers the whole design brief) and the qr code colors page (which covers colour and contrast). It focuses on the shape and fill levers a design-curious buyer cares about most: custom module shapes, custom eye shapes with the per-eye pupil/ring split, gradient direction and readability, and frames with captions. Each section names the lever, the options, and the scannability note that goes with it, then we cross-link the related guides.

Module shapes — square, rounded, and dots

The data modules are the small squares that fill the grid between the finder eyes. The default is a flat square, which is what a phone camera is calibrated to read. Rounded squares soften the corners slightly; dots replace each square with a small circle. Each step away from the flat square removes a little of the hard edge the camera locks onto, so the trade-off is style versus the ease of decoding at small sizes or in poor lighting.

The scannability note: dots are the riskiest of the three because a circle has less edge than a square of the same footprint, so a dotted code needs to be printed a touch larger than a square one and paired with error-correction level M at minimum (H if you also add a logo). Rounded squares sit safely between the two. Dots also pair poorly with very dense codes — keep the payload short so the grid stays low-version, which our qr error correction guide explains in depth.

Eye shapes — square, rounded, and circle, with the per-eye split

The three finder eyes in the corners are how the camera locates and orients the code, and they rely on a fixed 1:1:3:1:1 dark-light-dark ratio. Styling the eyes is one of the most effective branding touches, but it is also the styling choice most likely to break a code outright, because if a finder eye no longer reads as a clear square-within-a-square the whole code fails to frame. Square eyes are the safe default; rounded eyes soften the outer and inner corners; circle eyes turn both the outer ring and the inner pupil into circles.

QRForge exposes a per-eye split so you can style the outer ring and the inner pupil independently — for example a rounded outer ring with a circular pupil, or a brand-coloured ring with a dark pupil. The scannability rule is that whatever combination you pick must preserve that 1:1:3:1:1 ratio, and the eyes need the strongest contrast on the whole code. Keep the pupil at least as dark and high-contrast as the body, and never soften the eye so aggressively that its ratio becomes ambiguous. Our how does a QR code work guide covers what each part of the code does and why the finder ratio is load-bearing.

Gradients — linear and radial, and the readability end-to-end rule

A gradient fill blends two brand colours across the modules and is one of the most effective ways to make a code feel designed. A linear gradient runs the blend along a straight axis (left-to-right, top-to-bottom, or any rotation); a radial gradient runs it outward from a centre point. Both look great in a mockup and both have the same single failure mode: a gradient that passes through a light or mid-tone produces modules near one part of the code that the camera reads as background instead of foreground, and the decode fails in that band.

The scannability rule is end-to-end readability: every colour the gradient passes through must stay clearly a dark value against the light background. A dark-brand-to-different-dark-brand gradient works; a dark-to-light gradient is the most common gradient failure. Keep the background a solid light colour — a gradient background is even riskier than a gradient foreground because it shifts the contrast reference across the code, so each module is read against a different local background. Our qr code colors guide covers the contrast math behind this rule, and qr error correction explains why a denser styled code still needs short payloads.

Frames and captions

A frame is a rounded or square border drawn around the code, and a caption is a short call-to-action label sitting in the frame band (“Scan to view menu”, “Scan for WiFi”). A clear caption measurably lifts scan rates because it tells people what to do, and the frame gives the code a designed container. The styling lever is the border shape and width, the caption text, and the caption position (top or bottom band).

The scannability note is placement: the frame belongs outside the quiet zone, never on top of it. A border that sits in the empty 4-module margin around the code destroys the very blank space the scanner needs to locate it, so the frame is drawn beyond the quiet zone, leaving the margin intact inside it. Keep the caption short and inside the frame band, not floating over the pattern. Our qr code design guide covers frames as part of the whole design brief, and the qr best practices guide covers the quiet-zone rule that frames must respect.

The styling levers and their scannability trade-offs

The table below collects every styling lever, the options QRForge exposes, and the scannability note that goes with each. Treat the third column as the non-negotiable guardrail that separates a styled code that scans from one that looks great in the mockup and fails in the real world.

How QRForge implements each lever

Every lever above is a live control in QRForge’s free generator. The module shape and eye shape selectors update the preview instantly, the per-eye colour pickers let you brand the finder ring and pupil independently, the linear and radial gradient controls blend two colours with a rotatable axis for linear fills, and the frame controls add a rounded or square border with a caption in a top or bottom band — all drawn outside the quiet zone so scannability is never traded for the frame.

Because the preview renders live in the browser, you can scan-test a styled code on your phone before you export it, then download SVG or EPS for crisp print or PNG for screens. The styling is intentionally left in your hands with safe defaults and clear guardrails rather than locked behind presets — our qr code design guide walks through the full design workflow, the qr code colors guide covers the contrast rules, and the qr best practices guide is the scannability checklist every styled code should pass before it ships.