One of the most fun ways to use CSS is to create a delicious looking representation of your favorite types of food. If you’ve never seen this done before, you might be surprised at the amount of versatility that CSS provides — with it, it’s beyond easy to create your own replicas of things like ice cream and donuts that actually resemble the real thing. Take a look at the list below to see some of our favorite tutorials and snippets for making food out of CSS — just don’t read if you’re hungry!
1. HTML and CSS Ice Cream Cone
This pure CSS tutorial shows you how to make a delicious looking ice cream cone. The cone in question is filled with what looks to be strawberry or raspberry flavored ice cream, but don’t be afraid to get creative and change the code to make it resemble your favorite flavor.
2. CSS Donut
Who doesn’t love donuts? This pink frosted donut (with sprinkles!!!) looks seriously good enough to eat.
Not only does this cute little burger have a smiley face, but it also comes with the works (cheese, lettuce, tomato) AND it’s animated to do a little jump. If you prefer your food without a face, you can easily customize the code to get rid of that feature.
4. CSS Cupcake
If these cupcakes were real, I think I’d eat about four of them. How cute is the cherry on top?
CSS imitates life — the coffee mug you can create with this snippet has a pretty big leak/spill, just like in real life!
6. CSS3 Pizza
Mmm, this pizza has cheese, pepperoni, mushrooms, and green peppers as toppings. If you’re not a fan of all of those, adjust the code to leave out your least favorites.
If you’re looking for something more on the healthy side, might we suggest checking out this tutorial for making a background completely out of adorable little pineapples?