Generator | QRky.to

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:

Ensure the generated QR code can be recognised by a scanner

Type:

Colour mode:

Solid colour

Gradient

Type:

Gradient:

Angle:

deg

Gradient angle in degrees, from 0° to 360°

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

{
  "$schema": "./node_modules/@liquid-js/qr-code-styling-cli/lib/schema.json",
  "shape": "circle",
  "qrOptions": {
    "errorCorrectionLevel": "Q"
  },
  "dotsOptions": {
    "type": "soft",
    "gradient": {
      "type": "linear",
      "rotation": 3.9269908169872414,
      "colorStops": [
        {
          "offset": 0.15,
          "color": "#9a5ff5"
        },
        {
          "offset": 1,
          "color": "#29c6fa"
        }
      ]
    }
  },
  "cornersSquareOptions": {
    "type": "extra-rounded"
  },
  "cornersDotOptions": {
    "type": "extra-rounded"
  },
  "plugins": [
    {
      "plugin": "@liquid-js/qr-code-styling/border-plugin",
      "round": 1,
      "size": 0.15,
      "proportional": true,
      "margin": 0,
      "text": {
        "font": "Fredoka",
        "fontWeight": 500,
        "fontStyle": "normal",
        "color": "#ffffff",
        "size": 0.07,
        "top": {
          "content": "Make your QR codes pop"
        },
        "bottom": {
          "content": "with QRky.to"
        }
      }
    }
  ],
  "imageOptions": {
    "mode": "center",
    "imageSize": 0.9,
    "margin": 1,
    "fill": {
      "color": "rgba(255,255,255,0.75)"
    }
  },
  "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).

Styled QR Generator