Dot Grid — Radial Fade Demo

Getting started

A short, descriptive headline for this surface

Supporting copy that explains the context or action available here. Keep it brief and useful to the reader.

Equivalent CSS

/* Contained: .dot-grid clipped inside .container */
.container {
  position: relative;
  overflow: hidden; /* clips the dot grid to the container bounds */
}

.dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, currentColor 0.5px, transparent 0.5px);
  background-size: 7px 7px;
  opacity: 0.40;
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    black 0%, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.2) 50%, transparent 70%
  );
  mask-image: radial-gradient(
    circle at 50% 50%,
    black 0%, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.2) 50%, transparent 70%
  );
  pointer-events: none;
}