18 CSS Lists - Free Frontend

FreeFrontend.

Languages

• HTML 36
• CSS 282
• JavaScript 218

Frameworks

• Bootstrap 65
• Tailwind CSS 78

Community

Advertisement

Scroll-Driven Sticky Text Reveal

demo & code

Scroll-Driven Sticky Text Reveal is a high-end typographic interface. It utilizes modern CSS scroll timelines to synchronize the visual state of a list with the user’s scroll position. As items move through a designated “focal point,” they transition from a dimmed state to a vibrant highlight, creating a seamless reading experience.

Level: Intermediate Browser Support [As of Feb 2026]: Chrome 115+, Edge 115+, Safari 26+

3D Stacking Card List Effect

demo & code

This 3D Stacking Card List Effect transforms a standard vertical list into an immersive, layered user interface. By leveraging CSS 3D transforms and focal blur filters, it simulates a physical deck of cards where background items appear distant and out of focus, settling into a clear layout only upon interaction.

Level: Intermediate Browser Support [As of Jan 2026]: Chrome 84+, Edge 84+, Firefox 63+, Safari 14.1+

Pure CSS ASCII File Tree

demo & code

This Pure CSS ASCII File Tree brings the nostalgia of command-line directory structures to the web without typing a single pipe character manually. By cleverly utilizing CSS pseudo-elements (::before), it automatically draws the connecting lines (│, ├, └) for nested lists. It’s perfect for technical documentation, sitemaps, or retro-themed interfaces.

Level: Beginner Browser Support [As of Jan 2026]: Chrome 4+, Edge 12+, Firefox 3.5+, Safari 3.1+

Nested List Style

demo & code

An elegant, modern list of track properties featuring custom graphic icons and smooth micro-interactions like padding shifts and color changes on hover.

x close

See the Pen Nested List Style.

Literally Linked Lists

demo & code

An engaging data comparison tool that transforms static lists into a dynamic relationship map, clearly visualizing taste overlaps via connecting lines.

x close

See the Pen Literally Linked Lists.

AutoSort ToDo List (CSS Only)

demo & code

A ToDo list with a unique feature: automatic sorting of completed tasks to the end of the list, implemented without JavaScript, using the Flexbox order property and the powerful CSS :has() selector.

x close

See the Pen AutoSort ToDo List (CSS Only).

Layout Switcher with :has()

demo & code

Discover a pure CSS solution for dynamic layout switching between List and Grid views. It leverages the powerful CSS :has() selector to conditionally apply grid-template-columns based on the state of a radio input, all without a single line of JavaScript.

x close

See the Pen Layout Switcher with :has().

CSS Staircase Hover Effect Using :has()

demo & code

This “staircase” hover effect is a prime example of the power of the new CSS :has() selector. It enables elements to react to the state of their siblings, creating a complex and elegant animation without JavaScript.

x close

See the Pen CSS Staircase Hover Effect Using :has().

The Magic of Cascading CSS Counters

Interactive CSS counter demo with draggable sections. Sortable enables nested block reorganization, tweakpane controls counter start and increment values. shiki generates live syntax highlighting. Visualizes CSS variables --section-start and --section-increment.

Interactive Loose-Leaf Todo List

Lined paper simulation with tear-off holes. Red vertical line mimics margin, repeating linear gradient creates rows. Mobile adaptation via scale with different transform-origin. Content editable (contenteditable).

Morphing Moonrocks

Task list with animated emoji markers. SCSS loop creates increasing animation delay for each item, producing wave-like moon pulsation effect. transform: scale animates marker size.

The Order of Operations

Styled list with automatic numbering via CSS counters. Two pseudo-elements ::before and ::after create blurred circles in container background. Header sticky with shadow on scroll.

Todo List with Sticky Notes

Interactive todo list with 3D hover effect. CSS variable --levitate controls transforms: items lift, tilt, and cast shadow. ::after pseudo-element adds highlight via mix-blend-mode. Click toggles .done class via JavaScript.

Advertisement

Codepen Team Member List - Even/Odd Styles

Reversed and Split List

Reversed and Split List with ::before

Compact Book Quotes

Custom Properties Step Progress Indicator

Handwritten Shopping List with Custom markers

A Better OL (Numbered List with Circle Outline)

Named Scroll-Timeline Vertical

Inline Lists with Conditional Separators

Just Another Definition List, Grid, Sass, Responsive

Mini Insta-Friends Scrolling List Layout

Take a Number Contact List

CSS Pseudo Commas: Exploring Comma Rules in Nouns and Verbs

Pure CSS To-Do

Advertisement

Sticky Definition List

OL Cards - Single Element

Ordered List Arrow Cards

UL-Circles with Icons

OL Circle Cards

UL Banner Cards

UL Icon Cards

CSS3 List. Spinning Heart List-Style

OL Standing Cards

UL Cards with Depth

Stars List

Todo List with Little Details

CSS Ordered List with Leading Zero

CSS-Only Numbered Lists with Drop Shapes

List UI

Cards - ListView

Advertisement

Checkboxes Progress Bar with Pure CSS

Full Circle Note Taking

File Manger Selectable List

To-Do List

To-Do List

CSS Gradient Counter List

Nice List Styles

Simple CSS Check List

12nth Selectors

// Related Hubs

CSS :has() Examples Explore CSS :has() selector examples for styling … → CSS Counters Automate numbering with CSS Counters: create … → CSS flexbox Examples Explore CSS Flexbox examples — from simple … → CSS Hover Effects CSS Hover Effects collection for modern UI design. … → CSS Nested Lists CSS Nested Lists collection for structured UI … → CSS Pseudo Elements Master ::before and ::after to replace wrapper … → JavaScript List Examples Explore JavaScript-powered list components with … →

• ««
• «
• 1
• 2
• »
• »»