< Back to Frontend Friday Folks Index

Checkerboard

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