DEV Community

Cover image for CSS Art: Drawing Yoda with CSS

CSS Art: Drawing Yoda with CSS

Alvaro Montoro on July 06, 2025

I like drawing with CSS, I find it relaxing (I know it's weird, but it is what it is). Today I recorded a live session with me coding this kawaii v...
Collapse
 
ansellmaximilian profile image
Ansell Maximilian

Thanks for sharing!

Collapse
 
cristea_theodora_6200140b profile image
Theodora Cristea

Impressive! 👏Is lovely 😍
It’s amazing how you managed to depict an iconic character like Yoda using only HTML and CSS. The fine details, such as the subtle asymmetry of the ears and hands, add a unique character and make the drawing feel lively and authentic. Also, your use of border-radius for the head and drop-shadow for the hood shows a deep understanding of CSS techniques. Thank you for sharing this creative process and the inspiration!👏🏻👏🏻👏🏻

Collapse
 
dotallio profile image
Dotallio

This is so fun! Love how the tiny asymmetries give Baby Yoda so much character - did you find any part especially tricky to get right with pure CSS?

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks. It's trickier than with SVG, but with time and practice, it becomes a bit easier.

Collapse
 
artyprog profile image
ArtyProg • Edited

Very nice, thank you .
How have you mastered gradients, uniquely by testing ?

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks. It's a lot of practice.

Collapse
 
eagle77 profile image
George

Brilliant Work

Collapse
 
md_pabel_fe07e07449db7326 profile image
MD Pabel

Very nice, thank you .

Collapse
 
jos_antonioolivaresace profile image
José Antonio Olivares Acero

Thanks,

Wow, this is really impressive! CSS art like this always blows my mind. 🤯 I’ve worked with CSS before, but I’ve never dared to try something as intricate as this. The way you use transformations, shadows, and gradients to create such detailed shapes is truly inspiring and motivates me to experiment more with CSS.

I think this is also a great way to learn and explore what CSS can do beyond the usual layouts and styles. Seeing how properties like border-radius, box-shadow, and transforms can be used to achieve these results gives me a ton of ideas for my own creative projects.

Thanks for sharing! I’m definitely going to give this a try and see how I can modify it to make something personalized.

Collapse
 
auyeungdavid_2847435260 profile image
David Au Yeung

This is amazing😲

Collapse
 
arajane24 profile image
Ara Jane

You certainly dedicated a lot of time and effort to create this adorable project.

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

This is extremely impressive, the little imperfections are what make it so good tbh