4

I have a spotlight circle, I'm trying to place it in the bottom left of the screen and to make the overlay take full height and width but it's not working perfectly, here is the code: 

.spotlight{
display: block;
  float: left;
  background: radial-gradient(10px 10px at 110px 30px, transparent 0, transparent 60px, rgba(0, 0, 0, 0.5) 65px);
  background: -moz-radial-gradient(10px 10px at 400px 30px, transparent 0, transparent 95px, rgba(0, 0, 0, 0.5) 100px);
  background: -webkit-radial-gradient(10px 10px at 400px 30px, transparent 0, transparent 95px, rgba(0, 0, 0, 0.5) 100px);
  background: -o-radial-gradient(10px 10px at 400px 30px, transparent 0, transparent 95px, rgba(0, 0, 0, 0.5) 100px);
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 100000000;
  bottom: 0px;
  }
<div class="spotlight"></div>
Natalie Merrill
  • 147
  • 1
  • 2
  • 13

3 Answers3

2

You can correct the gradient like below:

from the left it should be 65px and from the top 100% - 65px. (you can replace 65px with any value you want)

.spotlight{
  background: radial-gradient(10px 10px at 65px calc(100% - 65px), transparent 0, transparent 60px, rgba(0, 0, 0, 0.5) 65px);
  height: 100%;
  pointer-events: none;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  z-index: 100000000;
  bottom: 0px;
  }
<div class="spotlight"></div>

You can also simplify like this:

.spotlight{
  background: radial-gradient(circle at 65px calc(100% - 65px), transparent 60px, rgba(0, 0, 0, 0.5) 65px);
  height: 100%;
  pointer-events: none;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  z-index: 100000000;
  bottom: 0px;
  }
<div class="spotlight"></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

You can get it to the bottom left by modifying radial-gradient right after where it says at. The first measurement represents how far to the left you want it and the second one controls how far from the top you want it. You can replace the pixel measurements with left or bottom to get the spotlight in the bottom lefthand corner.

Here's a working example: https://jsfiddle.net/71w4jy9c/

If you want to get it to display farther up from the bottom you could use calc(100% - PIXELS_FROM_THE_BOTTOM) instead of bottom.

This is the CSS I used to make it work:

.spotlight {
  display: block;
  background: radial-gradient(10px 10px at 30px bottom, transparent 0, transparent 60px, rgba(0, 0, 0, 0.5) 65px);
  height: 100%;
  position: absolute;
  width: 100%;
  bottom: 0;
}
Christopher Bradshaw
  • 2,615
  • 4
  • 24
  • 38
0

Instead of using "at 110px 30px" try using "at 110px calc(100% - 110px)". That should place your gradient spotlight in the 110px from the left and 110px from the bottom regardless of screen size.

jorscobry
  • 113
  • 7