Illustration of a cat dressed up like an astronaut, looking at the stars on top of the moon.

title: CSS Art: Cat on the Moon published: true description: Illustration of a cat dressed up like an astronaut, looking at the stars on top of the moon. tags: css,webdev,showdev,html cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93p1y5r2jx5dvu9bh8du.png

Use a ratio of 100:42 for best results.

published_at: 2026-01-24 15:36 +0000

I built a small CSS Art scene: a cat astronaut standing on the moon.

The whole illustration is HTML + CSS: using gradients for lighting, border-radius for shapes, and shadows to create light (the irony). No SVG, no canvas.

The source code on CodePen:

{% codepen https://codepen.io/alvaromontoro/pen/MYeVvgr %}

I had already done the cat for a previous CSS Art, I adapted some shapes slightly, moving things around (especially in the face), changing colors (easy as I was already using CSS custom properties), and updating some sizes.