I've been really interested in the intersection between art and coding. My initial interest in CSS art started because I wanted to practice these two skills. Since my initial exposure to amazing CSS art creations on Twitter, Codepen, and many other sites I've been twitching with excitement to jump in and start learning how to make art using pure CSS myself! I made this little list to document things that I have learned and possibly help anybody that comes along this list curious about CSS art.

Hopefully, you enjoy this little list! Have fun learning!

What is CSS Art?

• Pure CSS art is exactly that, art made using pure CSS.

• CSS art is made by creating divs and adjusting the shapes, colors, angles, among a few other things to create an image.

• You mentioned divs. What are they and what do they do? A div is an HTML element used to group elements as well apply styles but does not by default do anything.

Why learn how to create art using CSS?

• It’s a great way to practice CSS.

• It’ll help you speed up when writing CSS.

• Teaches you positioning, sizing, styling, design skills, and creativity (a great marketable skill)!

• Learn how to break down larger problems into simpler ones.

How can I learn CSS/where can I learn it?

• It can be a little difficult to dive straight into CSS art if you don’t know CSS prior. Learning CSS prior to creating CSS art is recommended. Thankfully it’s quite simple!
• MDN Web Docs

What is Sass?

• Sass is a style sheet language. It is an extension of CSS which allows you to keep things more organized and the ability to use variables, nested rules, inline imports, and much more.

How can you start practicing now?

• There are weekly challenges on Codepen that you can try out.

• Find an image you like and try to recreate it in CSS. Break down the image into simple geometrical shapes and look for specific colors you want to use for each part of the image. By thinking about these things ahead of time it can make going into coding the image much easier!

• Look at other’s code. Tweak it and see how everything changes. When you change the values what does it do?

• Try CSS battle

Where can you find examples?

• Codepen.io is a great way to find other CSS Art by talented programmers.

Can I see somebody live code some CSS art?

• Learning CSS Through Creating Art

• Coding Artist CSS Animation Tutorials

Can I see somebody’s progress with CSS art?

• How I Started Drawing CSS Images by Sasha Tran

Oh that’s really cool:

• This Stunning Image Made With Pure Code Is Like a Mood Ring For Your Browser

• Check Out This Incredible Portrait Made Entirely With HTML And CSS Before It Inevitably Breaks

• Pixel-Art Earth & Moon

• Lynn Fisher makes CSS Art using a single div

Resources For Learning How to Make CSS Art:

• Pure CSS Art

• A Beginner’s Guide to Pure CSS Images

• Course On How to Make Pure CSS Images

• Pure CSS Drawing Essentials

Other Resources:

• Having trouble making specific shapes? Use this tool in order to generate css code for certain shapes that can be difficult to make by hand.

• click-to-copy CSS effects

Color Inspo:

• #dailycssimages

• Colorzilla chrome/firefox extension

• Coolors

• Dribble

• Producthunt

Last edited: 6/29/19