CSS Eggs: Duck Eggs Woo-oo!

For the past few years I've made CSS Easter eggs. See my CSS Tips Series, links below, for previous eggs. The eggs have changed from simple shape to more 3d looking in recent years. These first sections are copied straight from the previous article all I'm doing this time is changing some color, the structure is the same. So you can Skip to New Colors Basic Egg The basic egg class is an oval shape. It will be modified, each egg will have it's own class with a different gradient. In this image the oval has a slightly larger border for better visibility. Subsequent borders are small and the color changed to blend into the background. <div class="egg"></div> .egg { height: 364px; width: 225px; aspect-ratio: 3 / 4; border-radius: 100% / 125% 125% 80% 80%; background: white; border: 4px var(--Pink) solid; } Make it look real Next a egg_white class with a linear-gradient is added to give the egg a more realistic look. The classes were named egg_color rather than color_egg to make