How To Add A Glow Effect In Css

The CSS box-shadow property is deceptively crawly. When used "traditionally", it's a uncomplicated way to add a shadow effect to an element. I employ this for images in my blog. Information technology's prissy. Merely get saucier with it and you lot tin can pull off some really interesting things. I've already talked almost the pixel art hack. This fourth dimension I'yard going to share how to create colorful glow effects.

The Basics

Hither's a simple case to illustrate how box-shadow works:

                      div            {            
            width            :            150px;            
            height            :            150px;            
            background-color            :            #fff;                          box-shadow              :              120px 80px 40px 20px #0ff;              
              /* in order: x offset, y offset, blur size, spread size, colour */              
              /* blur size and spread size are optional (they default to 0) */              
              }

And here's a diagram of the result:

box-shadow diagram

Easy plenty. This is what we'll exist edifice upon.

Browser Back up

Permit's pause for a moment to talk about browser back up for box-shadow. Thankfully, it'due south pretty good. IE9+ and all the other major browsers support information technology unprefixed. However, the blur value seems to be practical inconsistently across browsers. Chrome in detail renders it at about half the size yous would expect. Non a showstopper, but something to be aware of.

Circles and Stacking

box-shadow takes the shape of the element it's on. If we make an element round with edge-radius: 50%, and then box-shadow will follow suit.

We tin can stack multiple glow effects on an element by giving box-shadow multiple sets of values, separated by commas. The glow effects will be stacked with first on top, last on lesser.

Alright, let's try these 2 techniques together:

                      div            {            
            width            :            40px;            
            summit            :            40px;            
            border-radius            :            l%;            
            groundwork-color            :            #fff;            
            box-shadow            :            
            0 0 60px 30px #fff,            /* inner white */            
            0 0 100px 60px #f0f,            /* middle magenta */            
            0 0 140px 90px #0ff;            /* outer cyan */            
            }

The upshot:

Encounter the Pen Circles and Stacking by Volition Boyd (@lonekorean) on CodePen.

Cracking! At this signal y'all already know enough to make some impressive visuals. Every bit an example, hither's what you tin can make by calculation a little bit of animation to the box-shadow techniques already covered (yous tin can click the circles, besides):

See the Pen Pretty Colors by Will Boyd (@lonekorean) on CodePen.

Insets and Offsets

Now allow'due south play with inset glows. By adding inset to your box-shadow annunciation, y'all can change information technology from an outer glow to an inner glow. Combine this with x/y offset values to create an upshot where a color is glowing inward from one side. Applying this CSS:

                      div            {            
            width            :            400px;            
            height            :            200px;            
            background-colour            :            #fff;            
            border            :            solid 2px #fff;            
            box-shadow            :            
            inset 60px 0 120px #f0f,            /* left magenta */            
            inset -60px 0 120px #0ff;            /* correct cyan */            
            }

Gives united states this:

Meet the Pen Insets and Offsets by Volition Boyd (@lonekorean) on CodePen.

Putting It All Together

Now let'southward combine all these techniques to create a glowing translucent marble. Hither's the CSS:

                      div            {            
            width            :            300px;            
            height            :            300px;            
            border-radius            :            50%;            
            box-shadow            :            
            inset 0 0 50px #fff,            /* inner white */            
            inset 20px 0 80px #f0f,            /* inner left magenta curt */            
            inset -20px 0 80px #0ff,            /* inner right cyan short */            
            inset 20px 0 300px #f0f,            /* inner left magenta broad */            
            inset -20px 0 300px #0ff,            /* inner right cyan broad */            
            0 0 50px #fff,            /* outer white */            
            -10px 0 80px #f0f,            /* outer left magenta */            
            10px 0 80px #0ff;            /* outer correct cyan */            
            }

And here's the final result:

See the Pen Glowing Translucent Marble past Will Boyd (@lonekorean) on CodePen.

Pretty nice for just a few lines of CSS, eh? There'south more that can be done, but this is a good start. Now go forth and create shiny, glowing, colorful things!