Creating a Beautiful Mid‑Autumn Festival Card with Pure CSS

The author participates in a Mid‑Autumn Festival creative submission by building a fully CSS‑based greeting card that combines animated clouds, a glowing moon with cut‑out text, lanterns, and a running rabbit.

Background and Knowledge Points

The tutorial assumes basic CSS knowledge and lists the key concepts used: CSS animations, gradient functions (linear‑gradient, repeating‑linear‑gradient, radial‑gradient), complex border‑radius values, CSS variables (var()), custom properties (@property), blend modes (background‑blend‑mode, mix‑blend‑mode), and pseudo‑elements.

Implementation Process

1. Overall Analysis

The design is divided into six parts: a deep‑blue cloud background, a yellow glowing moon with cut‑out text, flashing lanterns, moving clouds, a rabbit perched on the moon, and a rabbit running on the moon.

2. Cloud Background (Hardest Part)

The cloud texture is created by overlapping two “fan‑shaped ripple” layers using radial-gradient() for half‑circle ripples, linear-gradient() to mask the sides, and blend modes to combine the layers. The layers are then offset by 50% in both x and y directions and blended together.

3. Text‑Cutout Moon (Core Difficulty)

To make the text cut through two layers (the yellow moon and the underlying blue clouds), the author settles on blend modes. The moon is first rendered with mix-blend-mode: screen on a white layer, then a yellow gradient is added with mix-blend-mode: multiply . The final CSS snippets are:

#moon_behind{
  background: #fff;
  mix-blend-mode: screen;
  /* … */
  h1{
    color: #000;
  }
}

#moon_yellow{
  background: linear-gradient(#FF0,#FC0);
  mix-blend-mode: multiply;
  /* … */
  h1{
    color: #fff;
  }
}

<div id="moon_behind"><h1>中秋</h1></div>
<div id="moon_yellow"><h1>中秋</h1></div>

4. Flashing Lantern

The lantern is a single div styled with pseudo‑elements. The top square uses :before , the supporting ropes use repeating-linear-gradient , and the light source uses radial-gradient . Custom properties control size and position, and an animation changes the radial‑gradient radius via a custom property:

.lantern{
  --lanternLine: #d7061f; /* rope color */
  --lanternWidth: 7vw; /* width */
  --lanternHeight: 12.5vw; /* height */
  background: radial-gradient(circle at center,#febb75 0%, transparent var(--radius)),
              repeating-linear-gradient(to right, transparent 0%, transparent 15%, var(--lanternLine) 15%, var(--lanternLine) 25% );
  /* … */
}

.lantern::after{
  content: '';
  width: 40%;
  height: 150px;
  background: repeating-linear-gradient(to right, var(--lanternLine) 0%, var(--lanternLine) 5%, transparent 5%, transparent 10% );
  /* … */
}

@property --radius {
  syntax: '
';
  inherits: false;
  initial-value: 35%;
}

@keyframes lantern {
  to{
    --radius: 50%;
  }
}

<!-- lantern usage -->
<div class="lantern" style="--l: 15%;--t: 7%;--scale: .9"></div>

5. Moving Clouds

The clouds are built from multiple circles with irregular border shapes. By setting a large border-width and custom border-radius values, each circle forms a brush‑stroke‑like curve. Positioning many such circles creates the cloud formation, and z-index combined with blend modes ensures the clouds pass behind the moon without darkening it.

div{
    width: 100px;
    height: 100px;
    border: 7px solid #fff;
    border-radius: 50% 50% 20% 50%;
    border-right: 0;
}

6. Rabbit on the Moon

The rabbit is constructed from a single div with an eight‑value border-radius to achieve an irregular oval shape, and its eyes are added with a radial-gradient . Ears, paws, and tail are created using :before , :after , and box‑shadow to duplicate shapes.

.rabbit{
  border-radius: 41% 59% 41% 41% / 54% 60% 40% 41%;
}

background-image: radial-gradient(circle at 80% 48%,#000 0%,#000 4%,transparent 4%);

Finally, a simple running animation is applied to the rabbit using keyframes, completing the interactive greeting card.

Result and References

The finished card showcases a deep‑blue cloud background, a glowing cut‑out moon with the Chinese characters “中秋”, flashing lanterns, moving multicolored clouds, and a small animated rabbit. The author provides links to the original articles for deeper dives into the cloud background and other CSS tricks.