css Glowing Rings

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); }