40+ CSS Illustrations - Free Code + Demos

Collection of 40+ CSS Illustrations. All items are 100% free and open-source.

1. Polaroid Css Illustration

CSS Illustrations - Polaroid css illustration
Author: Nils Keller (tsomic)
Created on: November 8, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug

2. Pure CSS Podo Illustration & Animation

CSS Illustrations - Pure CSS Podo Illustration & Animation
Author: Aysenur Turk (TurkAysenur)
Created on: October 23, 2019
Made with: HTML, SCSS

3. Chester Bennington Tribute | Pure CSS Illustration

CSS Illustrations - Chester Bennington Tribute | Pure CSS Illustration
Author: petrovicstefanrs (petrovicstefanrs)
Created on: March 11, 2019
Made with: HTML, CSS, JS

4. CSS | Donuts Truck Illustration

CSS Illustrations - CSS | Donuts truck illustration
Author: Claudia Conceicao (cconceicao)
Created on: December 14, 2018
Made with: HTML, SCSS

5. Candles (Pure CSS Animation)

CSS Illustrations - Candles (Pure CSS Animation)
Recreated the dribbble shot by Gal shir. in complete CSS Animations. Here is the link https://dribbble.com/shots/2516854-Candles .
Author: Akhil Sai Ram (akhil_001)
Created on: November 1, 2018
Made with: HTML, SCSS
Tags: pure-css, animation, candles, dribbble, codevember

6. Baby Stuff - CSS Only Illustration

CSS Illustrations - Baby Stuff - CSS Only Illustration
Author: Rafaela (rafaeladeconto)
Created on: September 14, 2018
Made with: HTML, SCSS, JS

7. CSS Illustration - Honda

CSS Illustrations - CSS Illustration - Honda
Honda Sports EV with CSS
Author: Jove Angelevski (AlbertFeynman)
Created on: August 13, 2018
Made with: HTML, SCSS
Tags: honda, illustration, car, css-illustration, electric

8. Housing - Illustration + Animation

CSS Illustrations - Housing - Illustration + Animation
Author: Sowmya Seshadri (sowmyaseshadri)
Created on: August 11, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: purecss, illustration, animation

9. CSS Illustration - Bicycle

CSS Illustrations - CSS Illustration - Bicycle
Bicycle animation with pure CSS
Author: Jove Angelevski (AlbertFeynman)
Created on: August 7, 2018
Made with: HTML, SCSS
Tags: bicycle, css bicycle, bicycle animation, illustration, css-illustration

11. CSS Illustration 'Witch'

CSS Illustrations - CSS Illustration 'Witch'
Created CSS only.
Author: white pallet (WhitePallet)
Created on: February 2, 2018
Made with: HTML, CSS, JS
Tags: only-css, illustration, witch

12. CSS Illustration - Work With Fun

CSS Illustrations - CSS Illustration - Work with Fun
Author: José Rosário (JoseRosario)
Created on: January 14, 2018
Made with: HTML, CSS, JS

13. CSS Succulent Illustration

CSS Illustrations - CSS Succulent Illustration
HTML/CSS illustration for a succulent with animated eyes.
Author: Van Huynh (worksbyvan)
Created on: August 29, 2017
Made with: HTML, SCSS
Tags: art, css, illustration, succulent, cute

14. Cute Ice CSS Illustration

CSS Illustrations - Cute Ice CSS Illustration
First try at CSS Illustration. Design by MBE : https://dribbble.com/shots/2465916-Ice
Author: Thomas S. (OignonDoux)
Created on: January 20, 2016
Made with: HTML, SCSS, JS
Tags: css, illustration, ice, cute

15. StarWars BB-8 CSS Illustration + Animation

CSS Illustrations - StarWars BB-8 CSS Illustration + Animation
Author: DevTips (devtips)
Created on: January 9, 2016
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: starwars, css-illustration, animation, drawing, video

16. Vignette - Pure CSS Illustration

CSS Illustrations - Vignette - Pure CSS Illustration
Author: Casey Zumwalt (zumwalt)
Created on: November 17, 2013
Made with: HTML, SCSS
Tags: illustration, simple, flat

17. Animated Night Hill Illustration - Pure CSS

CSS Illustrations - Animated Night Hill Illustration - Pure CSS
Inspired by Yup Nguyen Night Hill Animated: https://dribbble.com/shots/2273454-Night-Hill-Animated
Author: Aybüke Ceylan (aybukeceylan)
Created on: November 1, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: animation, css, illustration, windmill

18. Time Lapse Of A Growing Plant

CSS Illustrations - Time lapse of a growing plant
Author: Manaswini (1832Manaswini)
Created on: June 8, 2020
Made with: HTML, CSS
Tags: css, css-animation, dancer, css-illustration

19. The Big Chicken

CSS Illustrations - The Big Chicken
Feeling both inspired and nostalgic after the CodePen meetup, I decided to finally build something that I've been wanting to build for some time. https://en.wikipedia.org/wiki/Big_Chicken
Author: Kristopher Van Sant (KristopherVanSant)
Created on: April 4, 2020
Made with: HTML, CSS
Tags: kfc, big chicken, css-art, css-illustration

20. CSS Illustration 'face'

CSS Illustrations - CSS Illustration 'face'
Created CSS only.
Author: white pallet (WhitePallet)
Created on: February 20, 2018
Made with: HTML, CSS, JS
Tags: illustration, css-only, woman, face, hair

21. Orange Lily

CSS Illustrations - orange lily
Author: vivien (vlemoine)
Created on: May 1, 2020
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-illustration

22. Breakfast | Pure CSS

CSS Illustrations - Breakfast | Pure CSS
Pure CSS Breakfast for this months 'Food Fight'!
Author: Coding Artist (Coding-Artist)
Created on: June 22, 2019
Made with: HTML, CSS
Tags: codepenchallenge, pure-css, css, css-images, css-illustration

23. CSS Illustration 04: Retronauts Logo

CSS Illustrations - CSS Illustration 04: Retronauts Logo
Pure CSS illustration of the logo from one of my favorite podcasts, Retronauts
Author: Tommy Noe (tjnoe01)
Created on: May 28, 2020
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: logo, css-illustration, retronauts

24. Workspace Illustration CSS

CSS Illustrations - Workspace Illustration CSS
Workspace Illustration using HTML and CSS
Author: Orzoon_Kunwar (orzoon)
Created on: September 13, 2018
Made with: Pug, CSS, Babel
CSS Pre-processor: None
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css-illustration, illustrations, workspace, css-art, desk

25. Mistletoe

CSS Illustrations - Mistletoe
Author: Camila Waz (camila_waz)
Created on: November 29, 2019
Made with: HTML, SCSS
Tags: pure-css, css-illustration, cpc-nth-child, codepenchallenge

26. CSS Fridge Illustration

CSS Illustrations - CSS Fridge Illustration
Inspired from https://dribbble.com/shots/2571083-Fridge
Author: Dinesh Thapa Magar (cybermandu)
Created on: November 8, 2017
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, css fridge, css-illustration, codevember

27. Dino

CSS Illustrations - Dino
Author: Camila Waz (camila_waz)
Created on: November 5, 2019
Made with: HTML, SCSS, JS
Tags: pure-css, css-illustration, css-image, dinosaur

28. #Codevember - 19 - Eggs

CSS Illustrations - #Codevember - 19 - Eggs
Author: Camila Waz (camila_waz)
Created on: November 20, 2018
Made with: HTML, SCSS
Tags: codevember, css-illustration, single-div

29. #Codevember - 8 - Cat Lamp

CSS Illustrations - #Codevember - 8 - Cat Lamp
Author: Camila Waz (camila_waz)
Created on: November 8, 2018
Made with: HTML, SCSS
Tags: codevember, pure-css, css-illustration, cat

30. CSS Star Illustration

CSS Illustrations - CSS Star Illustration
Author: Camila Waz (camila_waz)
Made with: HTML, SCSS

31. Jazzfm.ro CSS Illustration

CSS Illustrations - Jazzfm.ro CSS illustration
Author: Camila Waz (camila_waz)
Created on: July 2, 2019
Made with: HTML, SCSS
Tags: css-illustration, pure-css, girl, illustration, sass

32. Suitcase

CSS Illustrations - Suitcase
Author: Camila Waz (camila_waz)
Created on: July 23, 2019
Made with: HTML, SCSS
Tags: pure-css, css-illustration, css-image, suitcase

33. Pure CSS Avatar

CSS Illustrations - Pure CSS Avatar
Design - "Pink" by Olga Gurova https://dribbble.com/shots/7422667-Pink
Author: Mert Cukuren (knyttneve)
Created on: October 10, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: pure-css, css-image, css-illustration, illustration, avatar

34. #Codevember - 17 - Crown

CSS Illustrations - #Codevember - 17 - Crown
Author: Camila Waz (camila_waz)
Created on: November 19, 2018
Made with: HTML, SCSS
Tags: codevember, css-only, css-illustration

35. CSS Chop!

CSS Illustrations - CSS Chop!
It slices! It dices! It's all in CSS!
Author: Ryan Mulligan (hexagoncircle)
Created on: March 4, 2020
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-animation, sword, chop, animation loop, css-illustration

36. Orange Blueberry Checkbox

CSS Illustrations - Orange Blueberry Checkbox
Do you want an orange or a giant blueberry? Click the fruit to toggle your selection! Created for the Orange and Blue CodePen Challenge
Author: Ryan Mulligan (hexagoncircle)
Created on: October 12, 2019
Made with: HTML, CSS
Tags: cpc-orange-blue, codepenchallenge, checkbox, fruit, css-illustration