Linear Gradient at an angle

Issue

I'm trying to create a "beam" of white light like the following image using linear background gradients:

Angle of the gradient needs to be at 100 degrees. I've attempted to create this via jsfiddle = https://jsfiddle.net/gqn8tv69/

CSS:

.skeleton-9r7r1v3dh92:empty {box-sizing: content-box; height: 400px; background-color: #000000; border-radius: 0px 0px 0px 0px; background-image: linear-gradient( 100deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.5) 20%, rgba(255,255,255, 0.5) 80%, rgba(255,255,255, 0) 20%, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0) 0% );background-repeat: repeat-y;background-size: 100px 400px;background-position: 50% 0}

But everything I try either side has a dramatic cut. Any ideas on how to approach this?

Solution

Try like this:

.box {
  background:linear-gradient(100deg,#000 42%,#fff 48% 52%,#000 58%);
  height:300px;
}

<div class="box"></div>

Or like below for a fixed size:

.box {
  background:linear-gradient(100deg,#000 calc(50% - 50px),#fff,#000 calc(50% + 50px));
  height:300px;
}

<div class="box"></div>

Answered By - Temani Afif