css glowing rings : eCSSplorations in the Art of CSS

SOME SIMPLE BUT PLAYFUL DESIGNS CREATED with various box-shadow effects and absolutely-positioned “rings”. Each ring has multiple box-shadows applied to it to make a glowing effects. All the shadows are the same color, but the blur radii are incremented by 5 or 10px (see code).

Hover effects add some visual interest.

This drawing uses the css positional grid described here.

div.box-shadow-3  {
  box-shadow:
    0 0 20px rgb(255,255,255),
    0 0 10px rgb(255,255,255),
    0 0 5px rgb(255,255,255),
    inset 0 0 20px rgb(255,255,255),
    inset 0 0 10px rgb(255,255,255),
    inset 0 0 5px rgb(255,255,255);
}