Skip to content
CoDdleCoDoodle home
CoDdle
Share your art
Food Doodles

CSS Food Mascot

A smiling dumpling character — pinched pleats, round eyes, a big smile, and a little steam wisp.

BeginnerCSS~25 min
Start tutorialOpen in Playground

what you'll build

Here's the plan

You’ll learn

  • Shape a character from one rounded body + a few small marks
  • Place a face with percentages so it survives resizing
  • Add cheeks and a shine to make a flat shape feel lit
  • Stagger two tiny animations for a freshly-steamed feel

the steps

Build it, one change at a time

  1. Shape the body

    A wide rounded belly with a softer top, plus three little ink folds for the pinched pleats — it reads as a dumpling before it has a face.

    CSS
    /* the dumpling belly — wide round bottom, softer pinched top */
.body { inset: 14px 0 0 0; background: #FFFDF7; border: 6px solid #2B3A55; border-radius: 50% 50% 46% 46% / 64% 64% 38% 38%; }
/* three little ink folds stand in for the pinched pleats */
.fold { top: 6px; width: 4px; height: 26px; background: #2B3A55; border-radius: 4px; }
.f1 { left: 38px; transform: rotate(-10deg); }
.f2 { left: 73px; }
.f3 { right: 38px; transform: rotate(10deg); }

  2. Add the face

    Two round ink eyes and a big smile arc (border on the bottom only). The face does almost all of the 'cute' work.

    CSS
    .eye { top: 62px; width: 14px; height: 14px; background: #2B3A55; border-radius: 50%; }
.eye-left  { left: 44px; }
.eye-right { right: 44px; }
/* a friendly open smile — border on the bottom, none on top */
.mouth { top: 86px; left: 50%; transform: translateX(-50%); width: 24px; height: 13px; border-top: none; border-radius: 0 0 24px 24px; }

  3. Add details

    Soft coral cheeks and a small white shine on the belly make it feel lit and friendly instead of flat.

    CSS
    .cheek { top: 82px; width: 15px; height: 9px; background: #FF6B5E; border-radius: 50%; opacity: .5; }
.cheek-left  { left: 28px; }
.cheek-right { right: 28px; }
/* a little shine so the belly reads as soft and lit */
.shine { top: 42px; left: 38px; width: 18px; height: 11px; background: #FFFDF7; border-radius: 50%; opacity: .85; transform: rotate(-22deg); }

  4. Animate it

    A gentle bob keyframe rocks the dumpling, and two steam wisps rise and fade on a stagger — it's freshly steamed.

    CSS
    .dumpling { animation: dumpling-bob 3.4s ease-in-out infinite; }
.steam { bottom: 150px; width: 9px; height: 9px; border: 3px solid #6FA8FF; border-radius: 50%; opacity: 0; animation: steam-rise 3s ease-in-out infinite; }
.s1 { left: 88px;  animation-delay: 0s; }
.s2 { left: 112px; animation-delay: 1.2s; }
@keyframes dumpling-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }
@keyframes steam-rise { 0% { opacity: 0; transform: translateY(0) scale(.7); } 40% { opacity: .6; } 100% { opacity: 0; transform: translateY(-26px) scale(1.1); } }

make it yours

Make it yours

Change the moodTry a new color paletteAdd a sparkleMake it rainTurn into a food mascot

related doodles

Try one of these next

Tiny Sleepy Cloud

CSS CharactersBeginnerCSS⏱ 20 min

Pikachu Fan-Art Practice

Fan Art PracticeBeginnerSVGFan art⏱ 35 min

Happy Onigiri

Food DoodlesBeginnerHTML + CSS⏱ 25 min