CSS Characters

Tiny Sleepy Cloud

A fluffy cloud that drifts off to sleep — overlapping circles, a sleepy face, and a floating Zzz.

BeginnerCSS~20 min

Start tutorialOpen in Playground

what you'll build

Here's the plan

You’ll learn

Layer simple rounded shapes to build a fluffy body
Turn border arcs into a sleepy closed-eye face
Soften a doodle with faint cheeks and a contact shadow
Bring it to life with one gentle bob animation

the steps

Build it, one change at a time

Make the cloud body

Stack three overlapping circles and a wide rounded base — that's the whole fluffy silhouette. No face, no motion, just shape.

CSS

.cloud { position: absolute; left: 50%; top: 36px; transform: translateX(-50%); width: 180px; height: 110px; }
.puff { position: absolute; background: #FFFDF7; border: 6px solid #2B3A55; border-radius: 50%; }
.p1 { width: 70px; height: 70px; left: 0; top: 30px; }
.p2 { width: 92px; height: 92px; left: 44px; top: 0; }
.p3 { width: 70px; height: 70px; right: 0; top: 30px; }
.base { left: 10px; right: 10px; bottom: 0; height: 52px; border-radius: 40px; }

Add the sleepy face

Closed sleepy eyes are just downward arcs: border on the top, none on the bottom. Add a tiny mouth arc and it already looks drowsy.

CSS

/* closed sleepy eyes — border on top, none on the bottom */
.eye { position: absolute; top: 46px; width: 22px; height: 12px; border: 3.5px solid #2B3A55; border-bottom: none; border-radius: 50% 50% 0 0; }
.eye-left  { left: 48px; }
.eye-right { right: 48px; }
.mouth { top: 70px; left: 50%; transform: translateX(-50%); width: 14px; height: 8px; border-top: none; border-radius: 0 0 14px 14px; }

Add soft details

A faint coral cheek dab and a soft contact shadow underneath take it from a shape to a character floating in space.

CSS

.cheek { top: 64px; width: 15px; height: 9px; background: #FF6B5E; border-radius: 50%; opacity: .5; }
.cheek-left  { left: 32px; }
.cheek-right { right: 32px; }
/* a soft contact shadow so the cloud isn't floating in nothing */
.shadow { left: 50%; bottom: 14px; transform: translateX(-50%); width: 120px; height: 14px; background: #2B3A55; border-radius: 50%; opacity: .08; }

Animate the cloud

One keyframe gently bobs the whole cloud up and down; three staggered 'z' letters drift up and fade for the sleeping vibe.

CSS

.cloud { animation: cloud-bob 3.6s ease-in-out infinite; }
.zzz { color: #6FA8FF; font-weight: 700; animation: zzz-float 3s ease-in-out infinite; }
.z1 { right: 44px; top: 30px; font-size: 18px; animation-delay: 0s; }
.z2 { right: 30px; top: 16px; font-size: 14px; animation-delay: .6s; }
.z3 { right: 18px; top: 4px;  font-size: 11px; animation-delay: 1.2s; }
@keyframes cloud-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }
@keyframes zzz-float { 0%, 100% { opacity: 0; transform: translateY(4px) scale(.8); } 35%, 70% { opacity: .9; transform: translateY(-2px) scale(1); } }

make it yours

Make it yours

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

related doodles

CSS Food Mascot

Food DoodlesBeginnerCSS⏱ 25 min

Pikachu Fan-Art Practice

Fan Art PracticeBeginnerSVGFan art⏱ 35 min

Blinking Cat

Animal DoodlesBeginnerHTML + CSS⏱ 30 min