Get started with CSS art

A pink ice cream bar graphic with a happy smiling face

Making CSS art can be intimidating, but it's easy once you break graphics down into simple parts. If you peruse websites like CodePen, DevArt and Dribbble, it’s very easy to feel overwhelmed by the incredible things that developers and designers make, especially when you’re just starting out. I made my first piece of CSS art after lurking on these sites for years and eventually mustered up the courage to try and do it. Now, a few years and over 100 experiments later, it’s one of my favourite hobbies. 

Making CSS art is interesting and fun. It teaches you nuances of CSS that you might not normally work with, helps you see graphics (and problems in general) modularly and improves your speed when writing CSS. It’s also a great way for designers and developers to get on the same page when working on a user interface together. As you practise and refine your skills making CSS art, you’ll see an improvement in your day-to-day work (and you might even enjoy it more, too).

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Latest in CSS
css secrets
11 CSS secrets you need to know in 2020
12 tips for amazing CSS animation
CSS Houdini
CSS Houdini: All you need to know about the hottest APIs
State of the art CSS
8 state-of-the-art CSS features (and how to use them)
Bulma
Get started with Bulma
The best CSS frameworks
10 best CSS frameworks in 2020
Latest in Features
Anime characters to draw;A collection of popular anime characters, including Pikachu, Totoro, Sailor Moon, and a character resembling Lupin, are depicted in a vibrant and dynamic image.
The best anime characters to draw
Pete Gibbons headshot
"We’ve been making video for social since before social was a thing": a day in the life of Pete Gibbons
A group of people taking a selfie using the iPhone 16e.
7 reasons the iPhone 16e is a huge improvement on the iPhone SE 3
AI trends predictions 2025
How to use AI properly – 5 tips to help you get the most from the tech
How we made Ada; A digitally animated scene depicts two women in a grand, antique-style library, with one pointing.
How we made the "lush, handmade look" of animated series Ada
Cartoons of the 1950s - best animated movies of the 50s; A heartwarming animated scene depicts two canine characters sharing a meal of spaghetti and meatballs at a table outdoors.
Cartoons of the 1950s – the best animated movies from Lady and the Tramp to Animal Farm