How to make light shine on the background using HTML/CSS/JS?-CodePudding

I just had a question as to whether or not you can add in a glow/light shining sort of effect on the background in a webpage through the use of HTML, CSS or JavaScript (I don't think JavaScript can do this, however, just thought I'd include it)? If possible, how exactly do you achieve this? I have attached an image here: This . In short, what I'm asking is, how exactly do you achieve a glow/light shining effect on the background of a page?

Hope you understood my doubt (if not, feel free to ask in the comments).

Thanks in advance!

CodePudding user response：

Use radial-gradient()

.screen {
  margin: 0 auto;
  width: 150px;
  height: 300px;

  background: rgb(193,193,193);
  background: radial-gradient(circle at 90% 5%, rgba(123,123,123,1) 0%, rgba(50,50,50,1) 26%, rgba(0,0,0,1) 52%);
}

<div class='screen'></div>

CodePudding user response：

You can use radial-gradient() for this and set it on the background. Remember that you can use multiple gradients, solids colors, images, etc, with the background property in CSS.

Further, if you wanna have a more realistic light source and/or animate it, you need to use WebGL for it. I'd recommend looking into THREE.js.

CodePudding user response：

Try This One

background: radial-gradient(ellipse at top right, #8888, black);

you can adjust the little bit of hex as per your requirement

CodePudding user response：

All you need is a radial gradient.

I Would certainly recommend https://cssgradient.io/ to craft your own.

https://www.w3schools.com/css/css3_gradients.asp is a good place to know more about gradients in case you don't know.