40+ CSS Illustrations - Free Code + Demos
Collection of 40+ CSS Illustrations. All items are 100% free and open-source.
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
1. Polaroid Css Illustration
Author: Nils Keller (tsomic)
Links: Source Code / Demo
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
Author: Aysenur Turk (TurkAysenur)
Links: Source Code / Demo
Created on: October 23, 2019
Made with: HTML, SCSS
3. Chester Bennington Tribute | Pure CSS Illustration
Author: petrovicstefanrs (petrovicstefanrs)
Links: Source Code / Demo
Created on: March 11, 2019
Made with: HTML, CSS, JS
4. CSS | Donuts Truck Illustration
Author: Claudia Conceicao (cconceicao)
Links: Source Code / Demo
Created on: December 14, 2018
Made with: HTML, SCSS
5. 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)
Links: Source Code / Demo, Dribbble Shot
Created on: November 1, 2018
Made with: HTML, SCSS
Tags: pure-css, animation, candles, dribbble, codevember
6. Baby Stuff - CSS Only Illustration
Author: Rafaela (rafaeladeconto)
Links: Source Code / Demo, Dribbble Shot
Created on: September 14, 2018
Made with: HTML, SCSS, JS
7. CSS Illustration - Honda
Honda Sports EV with CSS
Author: Jove Angelevski (AlbertFeynman)
Links: Source Code / Demo
Created on: August 13, 2018
Made with: HTML, SCSS
Tags: honda, illustration, car, css-illustration, electric
8. Housing - Illustration + Animation
Author: Sowmya Seshadri (sowmyaseshadri)
Links: Source Code / Demo, Dribbble Shot
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
Bicycle animation with pure CSS
Author: Jove Angelevski (AlbertFeynman)
Links: Source Code / Demo
Created on: August 7, 2018
Made with: HTML, SCSS
Tags: bicycle, css bicycle, bicycle animation, illustration, css-illustration
10. CSS Illustration - Tram
Author: José Rosário (JoseRosario)
Created on: March 16, 2018
Made with: HTML, CSS
11. CSS Illustration 'Witch'
Created CSS only.
Author: white pallet (WhitePallet)
Links: Source Code / Demo
Created on: February 2, 2018
Made with: HTML, CSS, JS
Tags: only-css, illustration, witch
12. CSS Illustration - Work With Fun
Author: José Rosário (JoseRosario)
Links: Source Code / Demo, Dribbble Shot
Created on: January 14, 2018
Made with: HTML, CSS, JS
13. CSS Succulent Illustration
HTML/CSS illustration for a succulent with animated eyes.
Author: Van Huynh (worksbyvan)
Links: Source Code / Demo
Created on: August 29, 2017
Made with: HTML, SCSS
Tags: art, css, illustration, succulent, cute
14. Cute Ice CSS Illustration
First try at CSS Illustration. Design by MBE : https://dribbble.com/shots/2465916-Ice
Author: Thomas S. (OignonDoux)
Links: Source Code / Demo, Dribbble Shot
Created on: January 20, 2016
Made with: HTML, SCSS, JS
Tags: css, illustration, ice, cute
15. StarWars BB-8 CSS Illustration + Animation
Author: DevTips (devtips)
Links: Source Code / Demo
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
Author: Casey Zumwalt (zumwalt)
Links: Source Code / Demo
Created on: November 17, 2013
Made with: HTML, SCSS
Tags: illustration, simple, flat
17. 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)
Links: Source Code / Demo
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
Author: Manaswini (1832Manaswini)
Links: Source Code / Demo
Created on: June 8, 2020
Made with: HTML, CSS
Tags: css, css-animation, dancer, css-illustration
19. 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)
Links: Source Code / Demo
Created on: April 4, 2020
Made with: HTML, CSS
Tags: kfc, big chicken, css-art, css-illustration
20. CSS Illustration 'face'
Created CSS only.
Author: white pallet (WhitePallet)
Links: Source Code / Demo
Created on: February 20, 2018
Made with: HTML, CSS, JS
Tags: illustration, css-only, woman, face, hair
21. Orange Lily
Author: vivien (vlemoine)
Links: Source Code / Demo
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
Pure CSS Breakfast for this months 'Food Fight'!
Author: Coding Artist (Coding-Artist)
Links: Source Code / Demo
Created on: June 22, 2019
Made with: HTML, CSS
Tags: codepenchallenge, pure-css, css, css-images, css-illustration
23. CSS Illustration 04: Retronauts Logo
Pure CSS illustration of the logo from one of my favorite podcasts, Retronauts
Author: Tommy Noe (tjnoe01)
Links: Source Code / Demo
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
Workspace Illustration using HTML and CSS
Author: Orzoon_Kunwar (orzoon)
Links: Source Code / Demo
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
Author: Camila Waz (camila_waz)
Links: Source Code / Demo
Created on: November 29, 2019
Made with: HTML, SCSS
Tags: pure-css, css-illustration, cpc-nth-child, codepenchallenge
26. CSS Fridge Illustration
Inspired from https://dribbble.com/shots/2571083-Fridge
Author: Dinesh Thapa Magar (cybermandu)
Links: Source Code / Demo
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
Author: Camila Waz (camila_waz)
Links: Source Code / Demo
Created on: November 5, 2019
Made with: HTML, SCSS, JS
Tags: pure-css, css-illustration, css-image, dinosaur
28. #Codevember - 19 - Eggs
Author: Camila Waz (camila_waz)
Links: Source Code / Demo
Created on: November 20, 2018
Made with: HTML, SCSS
Tags: codevember, css-illustration, single-div
29. #Codevember - 8 - Cat Lamp
Author: Camila Waz (camila_waz)
Links: Source Code / Demo
Created on: November 8, 2018
Made with: HTML, SCSS
Tags: codevember, pure-css, css-illustration, cat
30. CSS Star Illustration
Author: Camila Waz (camila_waz)
Links: Source Code / Demo
Made with: HTML, SCSS
31. Jazzfm.ro CSS Illustration
Author: Camila Waz (camila_waz)
Links: Source Code / Demo
Created on: July 2, 2019
Made with: HTML, SCSS
Tags: css-illustration, pure-css, girl, illustration, sass
32. Suitcase
Author: Camila Waz (camila_waz)
Links: Source Code / Demo
Created on: July 23, 2019
Made with: HTML, SCSS
Tags: pure-css, css-illustration, css-image, suitcase
33. Pure CSS Avatar
Design - "Pink" by Olga Gurova https://dribbble.com/shots/7422667-Pink
Author: Mert Cukuren (knyttneve)
Links: Source Code / Demo
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
Author: Camila Waz (camila_waz)
Links: Source Code / Demo
Created on: November 19, 2018
Made with: HTML, SCSS
Tags: codevember, css-only, css-illustration
35. CSS Chop!
It slices! It dices! It's all in CSS!
Author: Ryan Mulligan (hexagoncircle)
Links: Source Code / Demo
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
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)
Links: Source Code / Demo
Created on: October 12, 2019
Made with: HTML, CSS
Tags: cpc-orange-blue, codepenchallenge, checkbox, fruit, css-illustration
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
More Awesome Lists:
Share: