CSS Art: Cat on 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](https://codepen.io/alvaromontoro/pen/MYeVvgr): {% codepen https://codepen.io/alvaromontoro/pen/MYeVvgr %} I had already done the cat for a [previous CSS Art](https://codepen.io/alvaromontoro/pen/zxvxbBv), 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.