'How to make this background lighting effect in CSS?

I was wondering if someone here knows how to create these "background lighting" effects? Like this one on tailindcss.com:

enter image description here

Here is my attempt:

.wrap {
  height: 80vh;
  width: 100%;
  background-color: black;
  opacity: .9;
}
.lighting {
  margin-left: 500px;
  height: 20vh;
  aspect-ratio: 1;
  filter: blur(15px);
  background-color: purple;
}
<div class="wrap">
  <div class="lighting"></div>
</div>
htmlcss


Solution 1:[1]

The exact style that website uses is a mix of two background-image styles. The first one is the gradient, the second is the checker pattern:

.index_beams__3fKa4 {
    background-image: url(/_next/static/media/[email protected]);
    background-size: 150rem;
}

.bg-grid-slate-900\/\[0\.04\] {
     background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(15 23 42 / 0.04)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e);
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 maraaaaaaaa

Related Questions