< Back to Frontend Friday Folks Index

Checkerboard

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 (518 characters)
1 
<div></div>
2 
<style>
3 
  body {
4 
    display: grid;
5 
    place-items: center;
6 
    background: #E3516E;
7 
  }
8 
  div {
9 
    width: 200px;
10 
    height: 200px;
11 
    background:
12 
      radial-gradient(circle at 60px 100px, #E3516E 10px, #0000 0) 0 0 / 80px 200px,
13 
      radial-gradient(circle at 20px 60px, #FADE8B 10px, #0000 0) 0 0 / 80px 80px,
14 
      radial-gradient(circle at 60px 20px, #FADE8B 10px, #0000 0) 0 0 / 80px 80px,
15 
      conic-gradient(#E3516E 25%, #FADE8B 0 50%, #E3516E 0 75%, #FADE8B 0) 0 0 / 80px 80px;
16 
  }
17 
</style>
During the JSCraftCamp 2024, we did two sessions of CSS Battles. This time, we wanted to do the solution with repeating gradients. It was fun to see how the checkerboard jumped from a 2x2 (the conic-gradient) to the whole board.
< Back to Frontend Friday Folks Index