The initial idea was just to use CSS custom properties to set the colors of each bulb in a string of Christmas lights. It evolved into an experiment with CSS illustration, allowing me to try out a variety of CSS3 properties that I’ve never had occasion to use. The group is arranged in a grid using CSS grid layout. Each bulb is just a single HTML element, shaped and colored with CSS — :before and :after pseudo elements, separate border radius settings, 3d transforms, multiple background gradients and multiple box shadows. Each bulb color is set using an RGB format color in a CSS custom property.