Intro
A QR code that fits your design. Not just a black square.
A QR code doesn't have to look like an afterthought. QR Code for Elements generates fully styled, scannable codes directly on your page — no external services, no image uploads, no workarounds. Every detail is yours to control: dot shapes, corner styles, colors pulled straight from your theme palette, borders, gradients. The result is a QR code that feels like it belongs to your design, because it does.
Ten content types in one component: URL, phone, WhatsApp, email, V-Card, text, WiFi, SMS, calendar event, and GPS coordinates. Switch type, fill in the fields, and the code updates instantly.
QR Type
✓ Choose what the code does when scanned. Ten content types in one component, versatile enough to cover virtually any use case, from sharing a contact card to connecting a device to a WiFi network, from dropping a pin on a map to scheduling a calendar event. Email includes built-in bot protection, the address is split into two parts, invisible to scrapers. Effectively a second email mode.
URL
Opens a web address directly in the browser.
Phone
Dials a phone number. Enter it in international format.
Opens a WhatsApp conversation. The prefix is added automatically.
Opens a pre-addressed message. Optional subject field included.
ⓘ Bot protection available with 'Obscure email'.
V-Card
Saves a full contact card: name, company, address, phone, mobile, email, url.
Text
Encodes a keyword or phrase. Scanning opens a Google search for that text.
WiFi
Connects to a network. Supports WPA/WPA2, WEP, and open networks.
SMS Messages
Opens a pre-filled text message ready to send.
Calendar
Adds an event with title, start and end time, location, and description. Times in UTC.
GPS Data
Opens a map at the specified coordinates. Find them by right-clicking any point in Google Maps.
Colors
✓ A QR code doesn't have to be anonymous. Full color control over every element, modules, corners, background, means the code becomes part of the design, not an interruption of it. Pick from your theme palette, add a gradient, give the corners their own color. The result is something people notice before they scan it.
Dots Gradient: a directional color transition across the modules, from Main Color to a Second Color. The direction is yours to choose. Simulated in Edit, verify in Preview.
Custom Corners: the three corner squares and their inner dots each have an independent color and opacity. A small detail with a big visual impact.
Main Color — the base color for all modules. Fully theme-integrated with opacity control.
Dots Gradient — adds a directional color transition across the modules, from Main Color to a Second Color. Direction is configurable. Simulated in Edit — verify in Preview.
Custom Corners — assign independent colors to the three corner squares and their inner dots, each with its own opacity slider.
Background — set the background color and opacity of the QR area.
Module Style
✓ Shape is everything. Modules, corner squares, and corner dots each have their own style options, all fully scannable regardless of the choice. From sharp and technical to soft and rounded, the same code can feel completely different.
Modules: Sharp, Soft, Rounded, or Dots.
Corners: Sharp, Soft, or Rounded for the three corner squares.
Corner Dot: Sharp or Dot for the inner corner elements.
ⓘ Non-Sharp styles are not visible in Edit. This is expected: Edit uses a static SVG placeholder that shows color and proportions only. Switch to Preview to see the actual module shapes rendered by the engine.
Borders
✓ Add a border and rounded corners to the QR container.
Enable — activates the border.
Color / Opacity — full theme color picker with opacity control.
Width — set individually per side.
Radius — rounded corners. Appearance depends on the Gap value set in the Colors panel.
Size
✓ Set the maximum display width of the QR code. Being SVG-based, the code naturally expands to fill its container, this value caps that expansion. The code scales responsively within that constraint, always staying sharp at any size.
ⓘ To reposition the QR code, place it inside a container and control alignment from there.
ⓘ The internal resolution is always 1000×1000px for clean PNG downloads.
Layout
✓ A QR code makes sense where someone can scan it, on a printed page or a large screen, phone in hand. On mobile, code and scanner are on the same device: it loses its purpose.
Hidden lets you control visibility by breakpoint, based on Elements Theme Studio width settings.
ⓘ In the demo, the code is always visible across all breakpoints for preview purposes.
Download
✓ Add an optional button that lets visitors save the QR code as a PNG file.
Label — the button text.
Text Size / Color — full typography and color control.
Background — separate color pickers for normal and hover state.
Margin & Padding — spacing controls for precise positioning. The button width adapts to the margins: set both to zero to stretch edge to edge, or use auto to center it.
Borders — optional border with color, width, and radius.
PNG Name — the filename used when the file is saved.
Advanced
✓ add custom Tailwind or utility classes for advanced layout control.