Search code examples
htmlcsslinear-gradientsconic-gradients

Creating a horizontal CSS spotlight with conic-gradient

Looking for advice: I have a webpage requiring 3 spotlights

  • One pointing vertically downwards
  • One from pointing from the left to the upper-top
  • One from the right side of the screen to the upper-top.

I've figured out how to do a vertical spotlight in CSS with the conic-gradient function, but I'm struggling to get a horizontal conical spotlight pointing from the left/right respectively.

Can any CSS gurus help make it more simple? And is there any CSS tool that can help with this?

body {
      background-color: black;
    }

    .light_center {
        transform-origin: center top;
        height: 120vh;
        left: 1.05vw;
        top: 0px;
        rotate: -1deg;
        position: absolute;
        width: 98.5vw;
        z-index:-10;
        background:
          conic-gradient(
            at 50% 5%,
            transparent 43%,
            hsl(0, 0%, 100%) 47%,
            hsl(0, 0%, 100%) 53%,
            transparent 57.5%
            )
          50% -25px / 100% 100%;
            
          background-blend-mode: overlay;
          background-repeat: no-repeat;
          mix-blend-mode: screen;
          opacity: 1;
          filter: blur(10px);
        
          -webkit-mask-image: radial-gradient(
          circle at 50% 0%,
          black 5%,
          transparent 70%
        );
      }
<html>
      <div class="light_center"></div>
</html>

As mentioned above, I've done the vertical spotlight from a top-down angle (on a dark background). I'm struggling to set up the horizontal equivalents. Please let me know if there's easier way to set this up.

Solution

  • I think the easiest way with the source right now is to rotate it. If I understood the question correctly.

    I think you can handle the spotlight as a class at once and just adjust the angle.

    body {
  background-color: black;
}

.light_center {
  transform-origin: center top;
  height: 120vh;
  left: 1.05vw;
  top: 0px;
  rotate: -1deg;
  position: absolute;
  width: 98.5vw;
  z-index: -10;
  background: conic-gradient(at 50% 5%, transparent 43%, hsl(0, 0%, 100%) 47%, hsl(0, 0%, 100%) 53%, transparent 57.5%) 50% -25px / 100% 100%;
  background-blend-mode: overlay;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 1;
  filter: blur(10px);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, black 5%, transparent 70%);
}

.light_left {
  transform-origin: center top;
  height: 120vh;
  left: -41.95vw;
  top: 0px;
  rotate: -28deg;
  position: absolute;
  width: 98.5vw;
  z-index: -10;
  background: conic-gradient(at 50% 5%, transparent 43%, hsl(0, 0%, 100%) 47%, hsl(0, 0%, 100%) 53%, transparent 57.5%) 50% -25px / 100% 100%;
  background-blend-mode: overlay;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 1;
  filter: blur(10px);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, black 5%, transparent 70%);
}

.light_right {
  transform-origin: center top;
  height: 120vh;
  left: 43.05vw;
  top: 0px;
  rotate: 32deg;
  position: absolute;
  width: 98.5vw;
  z-index: -10;
  background: conic-gradient(at 50% 5%, transparent 43%, hsl(0, 0%, 100%) 47%, hsl(0, 0%, 100%) 53%, transparent 57.5%) 50% -25px / 100% 100%;
  background-blend-mode: overlay;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 1;
  filter: blur(10px);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, black 5%, transparent 70%);
}
    <div class="light_left"></div>
<div class="light_center"></div>
<div class="light_right"></div>