Linear Gradient at an angle

Question

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?

Answer 1

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>

Answer 2

I did this "beam" using Colorzilla gradient editor , you can adjust the percentages or use the permalink to the gradient:

 .gradient { height: 100vh; width: 100vw; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0a0809+0,0a0e0a+44,ffffff+49,000000+53,000000+100 */ background: #0a0809; /* Old browsers */ background: -moz-linear-gradient(-45deg, #0a0809 0%, #0a0e0a 44%, #ffffff 49%, #000000 53%, #000000 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #0a0809 0%,#0a0e0a 44%,#ffffff 49%,#000000 53%,#000000 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #0a0809 0%,#0a0e0a 44%,#ffffff 49%,#000000 53%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a0809', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }

 <div class="gradient"></div>