Code sandbox

Type a little CSS, see a lot of color

Pick an activity, edit the HTML and CSS, and your coloring page updates instantly. Nothing you type here can break anything — press reset any time.

Choose an activity

3 activities to try — click a card to load it into the editor.

Color the Fox

StarterAnimals

Use color and background-color to bring the fox to life.

Auto run

Your goals

0 of 4 done

Paint the sky a light blue that looks like daytimenot completed yet
Make the fox body orangenot completed yet
Give the belly a beige colornot completed yet
Color the nose blacknot completed yet

index.htmlhtml

<div class="scene">
  <div class="sky"></div>
  <div class="fox">
    <div class="fox-ear left"></div>
    <div class="fox-ear right"></div>
    <div class="fox-body"></div>
    <div class="fox-belly"></div>
    <div class="fox-nose"></div>
  </div>
</div>

style.csscss

.scene {
  position: relative;
  height: 260px;
  border-radius: 20px;
  overflow: hidden;
  font-family: system-ui, sans-serif;
}

.sky {
  position: absolute;
  inset: 0;
  background-color: midnightblue; /* color me a daytime blue! */
}

.fox {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
}

.fox-body {
  position: absolute;
  inset: 30px 0 0 0;
  border-radius: 50% 50% 45% 45%;
  background-color: white; /* color me! */
}

.fox-belly {
  position: absolute;
  left: 40px;
  bottom: 0;
  width: 80px;
  height: 70px;
  border-radius: 50%;
  background-color: white; /* color me! */
}

.fox-ear {
  position: absolute;
  top: 0;
  width: 46px;
  height: 60px;
  border-radius: 50% 50% 10% 10%;
  background-color: white; /* color me! */
}

.fox-ear.left { left: 14px; transform: rotate(-14deg); }
.fox-ear.right { right: 14px; transform: rotate(14deg); }

.fox-nose {
  position: absolute;
  left: 72px;
  top: 92px;
  width: 18px;
  height: 14px;
  border-radius: 50%;
  background-color: white; /* color me! */
}

.scene {
  position: relative;
  height: 260px;
  border-radius: 20px;
  overflow: hidden;
  font-family: system-ui, sans-serif;
}

.sky {
  position: absolute;
  inset: 0;
  background-color: midnightblue; /* color me a daytime blue! */
}

.fox {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
}

.fox-body {
  position: absolute;
  inset: 30px 0 0 0;
  border-radius: 50% 50% 45% 45%;
  background-color: white; /* color me! */
}

.fox-belly {
  position: absolute;
  left: 40px;
  bottom: 0;
  width: 80px;
  height: 70px;
  border-radius: 50%;
  background-color: white; /* color me! */
}

.fox-ear {
  position: absolute;
  top: 0;
  width: 46px;
  height: 60px;
  border-radius: 50% 50% 10% 10%;
  background-color: white; /* color me! */
}

.fox-ear.left { left: 14px; transform: rotate(-14deg); }
.fox-ear.right { right: 14px; transform: rotate(14deg); }

.fox-nose {
  position: absolute;
  left: 72px;
  top: 92px;
  width: 18px;
  height: 14px;
  border-radius: 50%;
  background-color: white; /* color me! */
}

preview

Type a little CSS, see a lot of color

Choose an activity

Color the Fox

Selector Practice

Night Sky

Color the Fox

Your goals