.halftone {
    /* Halftone configuration variables */
    --halftone-dot-size: 4px;
    --halftone-dot-spacing: 4px;
    --halftone-brightness: 0.8;
    --halftone-blur: 2px;
    --halftone-rotation: 25deg;

    /* Color separation offsets */
    --halftone-cyan-offset-x: 0px;
    --halftone-cyan-offset-y: -4px;
    --halftone-magenta-offset-x: -1px;
    --halftone-magenta-offset-y: -1px;
    --halftone-yellow-offset-x: 1px;
    --halftone-yellow-offset-y: 1px;

    /* Dot colors */
    --halftone-cyan: cyan;
    --halftone-magenta: magenta;
    --halftone-yellow: yellow;
    --halftone-background: #fff;

    filter: url(#halftone-transparent);
    overflow: visible;
    transform: translateZ(0); /* force a HW accelerated layer */
}

.halftone > * {
    pointer-events: none;
    filter: brightness(var(--halftone-brightness)) blur(var(--halftone-blur));
}

.halftone::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    right: -100%;
    bottom: -100%;
    background-blend-mode: multiply;
    background:
        radial-gradient(
            var(--halftone-dot-size) var(--halftone-dot-size),
            var(--halftone-cyan),
            var(--halftone-background)
        ),
        radial-gradient(
            var(--halftone-dot-size) var(--halftone-dot-size),
            var(--halftone-magenta),
            var(--halftone-background)
        ),
        radial-gradient(
            var(--halftone-dot-size) var(--halftone-dot-size),
            var(--halftone-yellow),
            var(--halftone-background)
        );
    background-size: var(--halftone-dot-spacing) var(--halftone-dot-spacing);
    background-position:
        var(--halftone-cyan-offset-x) var(--halftone-cyan-offset-y),
        var(--halftone-magenta-offset-x) var(--halftone-magenta-offset-y),
        var(--halftone-yellow-offset-x) var(--halftone-yellow-offset-y);
    mix-blend-mode: screen;
    pointer-events: none;
    transform: rotate(var(--halftone-rotation));
    z-index: 1;
}

/* will need to put this somewhere in your html file

        <svg style="position: absolute; width: 0; height: 0;">
            <defs>
                <filter
                    id="halftone-transparent"
                    color-interpolation-filters="sRGB"
                >
                    <!-- Apply extreme contrast -->
                    <feComponentTransfer>
                        <feFuncR
                            type="linear"
                            slope="2500.875"
                            intercept="-1249.9375"></feFuncR>
                        <feFuncG
                            type="linear"
                            slope="2500.875"
                            intercept="-1249.9375"></feFuncG>
                        <feFuncB
                            type="linear"
                            slope="2500.875"
                            intercept="-1249.9375"></feFuncB>
                    </feComponentTransfer>

                    <!-- Convert black to transparent, white to opaque -->
                    <feColorMatrix
                        type="matrix"
                        values="
                1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                1 1 1 -0.8 0"
                    ></feColorMatrix>
                </filter>
            </defs>
        </svg> 

*/