CSS Sun Rays

[Codeman]

Is it possible to get the sun’s ball that the rays are coming out of to disappear and the rays of the sun are on the bottom of the page shining upward and the rays are enlarged (for the footer of my website)?

Click edit on Codepen

[PaulOB]

You can move the position of the sun to the bottom right of the viewport but in the context of a footer it won’t really make much sense because the effect is over the whole viewport so unless your footer covers the whole viewport it doesn’t really make sense.

The sun can be moved by setting its position to the bottom and right.

e.g.

.sun { 
  position: absolute;
	right:0;
	bottom:0;
	margin: auto;  
	width:70px;
	height:70px;
	border-radius:50%;	
	background:white;
	opacity:0.9;			
	box-shadow: 0px 0px 40px 15px white;  
}

Of course that means you will get a scroll bar on the viewport so you would need to wrap the whole thing in a viewport width and height div and set the overflow to hidden and probably make it position:fixed also depending on situation.

Regarding the rays then yes you can change them but its not a job for the faint hearted and will take a lot of time to achieve.

I have a much simpler version covering the viewport.

You’d have to check browser support for repeating conical gradients though.

You would be better off spending your time on your content first and then once that’s achieved then you can build your effects around that.

You can find another sunray effect on Lea Verou’s site here. You can see the sun rays used to good effect in the header.