.dot-grid-container {
    width: 100px;
    height: 100px;

    /* The gradient that will be SHOWN THROUGH the mask */
    background-image: radial-gradient(circle at center, #ffffff 20%, #a0a0a0 80%);
    background-size: 100% 100%;
    /* Ensure gradient covers the whole container */

    /* The MASK: A repeating pattern of circles (our dots) */
    -webkit-mask-image: radial-gradient(circle, black 0.5rem, transparent 0.5rem);
    mask-image: radial-gradient(circle, black 0.5rem, transparent 0.5rem);

    -webkit-mask-size: 1.25rem 1.25rem;
    mask-size: 1.25rem 1.25rem;
}