Seeking advice: I need to implement three spotlights on a webpage
- One shining directly downwards
- One angled from the left to the upper-top
- One angled from the right to the upper-top
I managed to create a vertical spotlight using CSS conic-gradient, but I'm having trouble with the horizontal conical spotlights from the left and right.
Any CSS experts out there who can simplify this for me? Are there any CSS tools available to assist with this task?
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>Despite successfully creating a top-down vertical spotlight on a dark background, I am struggling with setting up the horizontal equivalents. Any insights on an easier approach to accomplish this would be greatly appreciated.