QR Code Styling

Control the look of your QR code with these main options:

Dots & Corners

const options = {
    dotsOptions: {
        color: '#000000',
        type: 'rounded'         // "dot" | "random-dot" | "rounded" | "extra-rounded" | "vertical-line" | ...
    },
    cornersSquareOptions: {
        color: '#4267B2',
        type: 'extra-rounded'   // "dot" | "classy" | "square" | "inpoint" | "outpoint" | "center-circle" | ... (empty / undefined matches dotsOptions.type)
    },
    cornersDotOptions: {
        color: '#34A853',
        type: undefined         // "dot" | "classy" | "heart" | "star" | "weave" | "pentagon" | "hexagon" | ... (empty / undefined matches dotsOptions.type)
    }
}

See API documentation / IDE hints for all supported shapes

Background & Gradients

const options = {
    backgroundOptions: {
        color: '#ffffff',
        margin: 3
    },
    // Gradient example
    dotsOptions: {
        gradient: {
            type: 'linear',
            rotation: 45,
            colorStops: [
                { offset: 0, color: '#ff0000' },
                { offset: 1, color: '#00ff00' }
            ]
        }
    }
}