< Back to Frontend Friday Folks Index

Eclipse

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (224 characters)
1
<style>&{background:
2
  conic-gradient(#3210 135deg, #1038BF 0 225deg, #3210 0) 0 -24px / 100% 324px,
3
  radial-gradient(1q,#4F77FF 40px, #3210 0)0 -20px / 100% 100% no-repeat,
4
  radial-gradient(1q,#FFF 40px, #4F77FF 0)0 -60px

I began with the mountain and when I removed the part of the white moon, I figured out that changing the layers (and transparency values) makes more sense here. So now, it's a mountain with transparency on top of a blue, transparent "moon", which is the cut-out for the actual white to blue moon.

< Back to Frontend Friday Folks Index