Cover image for Drawing Frankenstein's Monster with CSS

Drawing Frankenstein's Monster with CSS

alvaromontoro profile image Alvaro Montoro ・1 min read

Another Halloween-themed illustration done with HTML and CSS. If yesterday it as a little Grim Reaper, today it is Frankenstein's Monster:

While coding it, I realized that it started looking more like the Hulk and less like Frankenstein's monster... I almost changed direction halfway and go with the superhero approach instead of the monster, but I didn't.

The whole drawing process took around one hour. Here there's a 3-minute video of how it was done (at 20x):

A couple of things to do before the next illustration: practice repeating gradients in CSS (had some trouble with them for the stitches, opted for a regular gradient), and revisit Flex (I got confused with align-items and justify-content.)


Editor guide
graciegregory profile image
Gracie Gregory (she/her)

Extra points for using the correct name/identification!! Frankenstein's monster. 👏

alvaromontoro profile image
pengeszikra profile image
Peter Vivo

Amazing! I never imagine how can draw image by css, but this video show the process, thx!
( I always draw by hand or tablet so this seems very exciting )

developman profile image
Dmitry Mineev

Thats amazing! Really. Never thougt that it possible to create something like this with just pure HTML and CSS.

robsonquaresma profile image
Robson Quaresma

Wow! Brilliant!