<div>
  <div class="overlay">
    <div class="left-flare horizontal-flare"></div>
    <div class="right-flare horizontal-flare"></div>
    <div class="full-flare horizontal-flare"></div>
    <div class="lens-center"></div>
    <div class="circle-1"></div>
    <div class="circle-2"></div>
    <div class="conic-1"></div>
    <div class="conic-2"></div>
    <div class="conic-3"></div>
   </div>
<div>
:root{
  --hue: 4;
  --lens-center-size: 40%;
  --lens-spread-size: 80%;
  --lens-left: 55%;
  --lens-top: 15%;
  --flare-height: 5%;
  --left-flare-width: var(--lens-left);
  --right-flare-width: calc(100% - var(--lens-left));
}
body {
  background: #111;
  display: grid;
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  place-items: center;
}

.overlay {
  background: url('https://blog.shimin.io/content/images/size/w1920/2021/02/pexels-veeterzy-38136.jpg'); 
  background-size: cover;
  position: relative;
  overflow: hidden;
  width: 50vmin;
  height: 50vmin;
}
.lens-center {
    position: relative;
    width: var(--lens-center-size);
    height: var(--lens-center-size);
    border-radius: 100%;
    left: calc(var(--lens-left) - (var(--lens-center-size) / 2));
    top: calc(var(--lens-top) - (var(--lens-center-size) / 2));
    background: radial-gradient(closest-side circle at center,
        hsl(var(--hue) 5% 100% / 100%) 0%, 
        hsl(var(--hue) 5% 100% / 100%) 15%, 
        hsl(var(--hue) 10% 70% / 70%) 30%,
        hsl(var(--hue) 0% 50% / 30%) 55%,
        hsl(var(--hue) 0% 10% / 5%) 75%,
        transparent 99%
    );
    filter: blur(4px);
}
.lens-center::before{
    content: '';
    display: block;
    width: var(--lens-spread-size);
    height: var(--lens-spread-size);
    left: calc((var(--lens-spread-size) - var(--lens-center-size))/2 * -1);
    top: calc((var(--lens-spread-size) - var(--lens-center-size))/2 * -1);
    position: absolute;
    border-radius: 100%;
    background: radial-gradient(closest-side circle at center,
      hsl(var(--hue) 15% 70% / 15%) 0%,
      transparent 100%);
}

.lens-center::after {
    content: '';
    display: block;
    width: 4vmin;
    height: 4vmin;
    left: 65%;
    bottom: 25%;
    position: absolute;
    border-radius: 100%;
    background: radial-gradient(closest-side circle at center,
      hsl(var(--hue) 30% 70% / 60%) 0%,
      transparent 75%);
}

.right-flare {
    left: var(--lens-left);
    width: var(--right-flare-width, var(--lens-left, 50%));
    top: calc(var(--lens-top) - (var(--flare-height)/2));
    background: radial-gradient(ellipse at center left,
        hsl(var(--hue) 20% 90% / 80%) 0%,
        hsl(var(--hue) 10% 70% / 40%) 30%,
        transparent 75%);
    filter: opacity(50%);
}

.left-flare {
    left: 0;
    top: calc(var(--lens-top) - (var(--flare-height)/2));
    width: var(--left-flare-width, var(--lens-left, 50%));
    background: radial-gradient(ellipse at center right,
        hsl(var(--hue) 20% 90% / 60%) 0%,
        hsl(calc(var(--hue) + 10) 10% 70% / 40%) 30%,
        transparent 75%);
    filter: opacity(40%);
}

.horizontal-flare {
    position: absolute;
    height: var(--flare-height);
}

.full-flare {
    background: radial-gradient(closest-side ellipse at 45% center,
      hsl(var(--hue) 20% 90% / 80%) 0%,
      hsl(var(--hue) 10% 70% / 30%) 30%,
      transparent 95%);
    left: 0%;
    width: 100%;
    top: 75%; 
    filter: blur(5px);
}

.conic-1 {
    width: calc(var(--lens-center-size) * 1.6);
    height: calc(var(--lens-center-size) * 1.6);
    position: absolute;
    background: conic-gradient(from 5deg at 0% 100%, 
        transparent 0deg,
        hsl(var(--hue) 10% 70% / 30%) 15deg,
        transparent 30deg);
    left: var(--lens-left);
    bottom: calc(100vh - var(--lens-top));
    filter: blur(5px);
}

.conic-2 {
    width: calc(var(--lens-center-size) * 3);
    height: calc(var(--lens-center-size) * 3);
    position: absolute;
    background: conic-gradient(from -5deg at 0% 100%, 
        transparent 0deg,
        hsl(var(--hue) 10% 70% / 30%) 45deg,
        transparent 90deg);
    transform-origin: bottom left;
    transform: rotate(-30deg);
    left: var(--lens-left);
    bottom: calc(100vh - var(--lens-top));
}
.conic-3 {
    width: calc(var(--lens-center-size) * 3.1);
    height: calc(var(--lens-center-size) * 3.1);
    position: absolute;
    background: conic-gradient(from 5deg at 0% 100%, 
        transparent 0deg,
        hsl(var(--hue) 10% 70% / 30%) 7deg,
        transparent 15deg);
    transform-origin: bottom left;
    transform: rotate(-45deg);
    filter: blur(5px);
    left: var(--lens-left);
    bottom: calc(100vh - var(--lens-top));
}

.circle-1 {
    width: calc(var(--lens-center-size) * 0.7);
    height: calc(var(--lens-center-size) * 0.7);
    left: 65%;
    top: 65%;
    border-radius: 100%;
    position: absolute;
    background: radial-gradient(closest-side circle at center,
        transparent 50%,
        hsl(var(--hue) 10% 70% / 40%) 90%,
        transparent 100%);
    filter: blur(5px);
}

.circle-2 {
    width: calc(var(--lens-center-size) * 0.4);
    height: calc(var(--lens-center-size) * 0.4);
    left: 62%;
    top: 62%;
    border-radius: 100%;
    position: absolute;
    background:  hsl(var(--hue) 10% 60% / 40%);
    filter: blur(2px);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.