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!
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.
.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>Try This One
background: radial-gradient(ellipse at top right, #8888, black);
you can adjust the little bit of hex as per your requirement