Styled QR Generator

Data:

Mode:

Select image

Drop here

Mode:

How to place image on the QR code

Image size:

How much of the available area should the image cover - for background mode, that's the entire QR code; otherwise, the size depends on the chosen error correction level

Margin:

How many dots of margin to add between the image and the QR code

Shape:

Error correction level:

Type:

Colour mode:

Solid colour

Gradient

Type:

Gradient:

Type:

Colour mode:

Match dots

Solid colour

Gradient

Type:

Colour mode:

Match corners

Solid colour

Gradient

Enabled

Roundness:

Margin:

How many dots of margin to add around the code

Colour mode:

Solid colour

Colour:

Gradient

{
  "shape": "circle",
  "qrOptions": {
    "errorCorrectionLevel": "Q"
  },
  "dotsOptions": {
    "type": "square",
    "gradient": {
      "type": "radial",
      "rotation": 0,
      "colorStops": [
        {
          "offset": 0,
          "color": "#69548d"
        },
        {
          "offset": 1,
          "color": "#b7396b"
        }
      ]
    }
  },
  "cornersSquareOptions": {
    "type": "outpoint"
  },
  "cornersDotOptions": {
    "type": "outpoint"
  },
  "plugins": [
    {
      "plugin": "@liquid-js/qr-code-styling/border-plugin",
      "round": 1,
      "size": 60,
      "color": "#b7396b",
      "margin": 0,
      "text": {
        "font": "Open Sans",
        "fontWeight": "normal",
        "fontStyle": "normal",
        "color": "#ffffff",
        "size": 27,
        "top": {
          "content": "GENERATE YOUR OWN"
        },
        "bottom": {
          "content": "BEAUTIFUL QR CODE"
        }
      }
    }
  ],
  "imageOptions": {
    "mode": "center",
    "imageSize": 0.9,
    "margin": 1,
    "fill": {}
  },
  "backgroundOptions": {
    "margin": 3,
    "round": 1,
    "color": "#fff"
  }
}

Above config can be used with @liquid-js/qr-code-styling or qr-code-styling-cli to generate a matching QR code. Note: "image" data is not included; it can be either a URL or a Buffer / Blob object containing the image (depending on the environment).