Table of Contents

Top 10+ CSS Lists – Collection of hand-picked free HTML and CSS list code examples.

NICE LIST STYLES

transfrom: skew property and nice list styles. made with HTML and CSS by Vikas singh

Demo and Download Code

CSS GRADIENT COUNTER LIST

An example of CSS counter with a fixed background gradient. created by Mattia Astorino

Demo and Download Code

TO-DO LIST

Animated checkmark UI. made with HTML & CSS by Sabine Robart

Demo and Download Code

TO-DO LIST

To-Do list with UI animation and microinteractions.made with HTML / CSS (SCSS) by Daiane Assen

Demo and Download Code

FILE MANGER SELECTABLE LIST

Click on a list item to select it. Hold Ctrl to multiselect.Made with HTML / CSS (SCSS) / JavaScript by Ahmed Nasr

Demo and Download Code

CARDS – LISTVIEW

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari. made with HTML / CSS (SCSS) by Sowmya Seshadri

Demo and Download Code

FULL CIRCLE NOTE TAKING

Compatible browsers: Chrome, Firefox, Opera, Safari. made with HTML (Slim) / CSS (SCSS) / JavaScript by Tony Banik

Demo and Download Code

LIST UI

Simple ordered list UI concept. Making use of pseudo elements. made with HTML (Pug) / CSS (Stylus) by Collin Smith

Demo and Download Code

CSS-ONLY NUMBERED LISTS WITH DROP SHAPES

Styled numbered list using CSS counters and pseudo elements for drop-shaped backgrounds.Made with HTML (Pug) / CSS by Ines Montani

Demo and Download Code

CSS ORDERED LIST WITH LEADING ZERO

CSS ordered list with leading zero and different number color.Made with HTML / CSS (SCSS) by Sven Wolfermann

Demo and Download Code