Navigation Menu

30+ CSS Lists - Free Code + Demos

Collection of 30+ CSS Lists. All items are 100% free and open-source.

NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉 Click to visit: ApplyFox.ai

1. Checklist Animation - Only CSS

CSS Lists - Checklist animation - Only CSS
Simple checklist animation
Author: Milan Raring (milanraring)
Links: Source Code / Demo, Dribbble Shot
Created on: March 5, 2020
Made with: HTML, SCSS
Tags: check, checklist, animation, css, list

2. 12 Nth Selectors

CSS Lists - 12 nth Selectors
A custom counter, Position sticky, nth-child selector, SCSS loop, SVG backgrond, SVG cursor, And an entry for this week's cpc
Author: Gabriele Corti (borntofrappe)
Links: Source Code / Demo
Created on: December 6, 2019
Made with: HTML, SCSS
Tags: codepenchallenge, cpc-nth-child, sticky, christmas

3. Gradient Ordered List

CSS Lists - Gradient Ordered List
A simple, styled ordered list using SCSS and HTML5. The gradient background transitions from one, to another, and back again. IE11 friendly.
Author: Erin E. Sullivan (erinesullivan)
Links: Source Code / Demo
Created on: May 15, 2019
Made with: HTML, SCSS
Tags: scss, ordered-list, gradient

4. Simple CSS Check List

CSS Lists - Simple CSS check list
Author: Garrett (gnevin)
Links: Source Code / Demo
Created on: April 4, 2019
Made with: HTML, CSS

5. Transfrom Skew Property And Nice List Styles

CSS Lists - Transfrom Skew Property and nice List styles
Author: vikas singh (vikassingh1111)
Links: Source Code / Demo
Created on: March 13, 2019
Made with: HTML, CSS

6. CSS Gradient Counter List

CSS Lists - CSS Gradient Counter List
An example of css counter with a fixed background gradient
Author: Mattia Astorino (equinusocio)
Links: Source Code / Demo
Created on: March 7, 2019
Made with: Pug, PostCSS
CSS Pre-processor: PostCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, gradient, counter, list

7. To-do List

CSS Lists - To-do list
Author: Sabine Robart (Artemis1)
Links: Source Code / Demo, Codepen.io
Created on: February 1, 2019
Made with: HTML, SCSS, JS

8. Minimal To-do List In CSS

CSS Lists - Minimal To-do List in CSS
To-Do list with UI animation and microinteractions: - Custom Checkbox; - Pseudo-elements; - CSS Animation.
Author: Daiane Assen (INapta)
Links: Source Code / Demo
Created on: February 1, 2019
Made with: HTML, SCSS, JS
Tags: ui, microinteractions, css, checkbox, html

9. File Manger Selectable List (VanillaJS)

CSS Lists - File Manger Selectable List (VanillaJS)
Author: Ahmed Nasr (ahmedhosna95)
Links: Source Code / Demo
Created on: December 17, 2018
Made with: HTML, SCSS, JS

10. Cards - ListView

CSS Lists - Cards - ListView
Author: Sowmya Seshadri (sowmyaseshadri)
Links: Source Code / Demo
Created on: September 13, 2018
Made with: HTML, SCSS

11. Full Circle Note Taking

CSS Lists - Full Circle Note Taking
how i take notes when im actually trying hard
Author: Tony Banik (banik)
Links: Source Code / Demo
Created on: August 31, 2018
Made with: Slim, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: notes, todo, tasks, css, font

12. List UI

CSS Lists - List UI
Simple Ordered list UI concept inspired by @jordanlucas. Making use of pseudo elements.
Author: Collin Smith (collinscode)
Links: Source Code / Demo
Created on: April 20, 2018
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: pseudo, list, ui, ordered, card

13. CSS-only Numbered Lists With "drop" Shapes

CSS Lists - CSS-only Numbered Lists With "drop" Shapes
Originally developed for: https://prodi.gy Styled numbered list using CSS counters and pseudo elements for drop-shaped backgrounds.
Author: Ines Montani (ines)
Links: Source Code / Demo, Prodi.gy
Created on: August 8, 2017
Made with: Pug, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, list, css-only

14. CSS Ordered List With Leading Zero

CSS Lists - CSS ordered list with leading zero
CSS ordered list with leading zero and different number color
Author: Sven Wolfermann (maddesigns)
Links: Source Code / Demo
Created on: February 22, 2016
Made with: HTML, SCSS
Tags: css, counter, list, leading zero, color

15. List Style - Ol And Ul Style

CSS Lists - list style - Ol and ul style
ul and ol li - list style type and list style image. more info . https://goo.gl/OHXv and https://goo.gl/aFgyU
Author: WILDER TAYPE (wilder_taype)
Links: Source Code / Demo
Created on: December 22, 2016
Made with: HTML, CSS
Tags: ol, ul, li, list-style-type, list-style-image

16. Custom List Style Via Clean Css

CSS Lists - Custom list style via clean css
Custom list style via clean css
Author: Serluck (serluk)
Links: Source Code / Demo
Created on: September 23, 2014
Made with: HTML, CSS
Tags: clean css, custom list, css

17. Benutzerdefinierte Listenpunkte

CSS Lists - Benutzerdefinierte Listenpunkte
Dieses Beispiel zeigt eine ungeordnete Liste mit benutzerdefinierten Listenpunkten.
Author: Dennis Kovarik (denniskovarik)
Links: Source Code / Demo
Created on: March 1, 2018
Made with: HTML, SCSS
Tags: ul, li, list-style, before

18. Checklist Demo (CSS Only)

CSS Lists - Checklist Demo (CSS Only)
Author: Christiaan Snoei (christiaansnoei)
Links: Source Code / Demo
Created on: May 27, 2019
Made with: HTML, SCSS
Tags: html, css, check, checklist, todo

19. CSS3 Checklist

CSS Lists - CSS3 Checklist
Author: Tran Nhat Anh (tran-nhat-anh)
Links: Source Code / Demo
Created on: April 19, 2019
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css3, checklist, html5, pug, sass

20. To Do List

CSS Lists - To Do List
A simple to-do list that crosses the tasks out when they are checked off as completed.
Author: Asha Holland (HollandAsh)
Links: Source Code / Demo
Created on: May 16, 2018
Made with: HTML, CSS
Tags: checklist, to-do, asha holland, checkbox

21. Flexbox Menu List

CSS Lists - Flexbox Menu List
Author: aMEya (mazereeta)
Links: Source Code / Demo
Created on: August 14, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: list, dl, menu, flexbox

22. List Styles

CSS Lists - List Styles
Author: Cody McAfee (gcmcafee)
Links: Source Code / Demo
Created on: December 19, 2014
Made with: HTML, Less
Tags: list, list-style, bullet

23. Custom Unordered List Styles

CSS Lists - Custom Unordered List Styles
Author: Prasad D. (prasad-d)
Links: Source Code / Demo
Created on: May 17, 2019
Made with: HTML, SCSS
Tags: custom list styles, list, unordered-list, ul, css

24. Custom List Numbers

CSS Lists - Custom List Numbers
Replacing the browser-generated list numbers with beautiful CSS-enhanced numbers using the ::before pseudo-class.
Author: David McFarland (sawmac)
Links: Source Code / Demo
Created on: August 25, 2014
Made with: HTML, CSS

25. Big Numbers Ordered List

CSS Lists - Big Numbers Ordered List
Tutorial from Design Shack http://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/
Author: yying6 (yying6)
Links: Source Code / Demo
Created on: June 27, 2012
Made with: HTML, CSS

26. HTML List Demos

CSS Lists - HTML List Demos
Author: Matt West (matt-west)
Links: Source Code / Demo
Created on: February 27, 2014
Made with: HTML, CSS
Tags: html

27. Ordered List Item Style Prefix

CSS Lists - Ordered List Item Style Prefix
Prefix ordered list item numbers with a static string using CSS.
Author: Eric Rasch (ericrasch)
Links: Source Code / Demo
Created on: June 21, 2012
Made with: HTML, Less
Tags: css, ordered-list, styled
NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉 Click to visit: ApplyFox.ai
More Awesome Lists:
CSS Download Buttons CSS Download ButtonsCSS Input Text CSS Input TextHTML <hr> with CSS HTML <hr> with CSSHTML <sup> & <sub> with CSS HTML <sup> & <sub> with CSS
Share: