Realistic Sun with CSS & Glowing CSS

I’m not sure why, but I’ve been fascinated with creating realistic sunrises digitally. There’s just something about seeing a digital natural representation with nothing but numbers and code. I’m a geek so I don’t question it. At any rate, here’s some simple code to create your own Glowing CSS sun should the need arise. I’ll eventually animate this with a sunrise and sunset, but in the mean time I thought this was too neat not to share.

See the Pen CSS Sun by Nate Balcom (@nbalcom) on CodePen.

Code the Sun

The html consists of 4 html divs. 2 to separate the sky from the ocean colored with both linear and radial gradients. A wrapper div to place the sun inside and a 4th div for the sun itself. The rest is all CSS. I came across this glowing CSS while looking for a way to make html elements glow. The body is set to #000 to match with the black water of the sea in the panel. This could be replaced in the CSS for the gradient, but this seemed to serve my purpose so I used it.

Affects of a Realistic Sun

These lines define the sun itself. The width and height obviously create the size of the sun. The border radius; commonly used on boxes with rounded corners, makes the full circle. We’re using it here to create the orb itself with a white fill for the background.

The rest of this effect is a glorified box shadow. These can be altered and colors changed to create any kind of glowing CSS effect you are looking for. See the pen below for another use of the glow effect. This tiny bit of magic CSS code creates the multiple colored glowing CSS effect of the sun. Simple, but elegant.

Another Realistic Sun

I created the sun in the video below some time ago with Flash, Photoshop and Illustrator. The only graphics in this animation were created using Photoshop brushes to create realistic looking clouds. The rest is all vector.

Comments

comments