Home / Frontend Codes and Demos / Essentials / Dividers / 14 CSS Divider Collections

14 CSS Divider Collections

Collection of hand-picked awesome Dividers developed using CSS, html and JavaScript. Some of the Dividers are having beautiful animation effects using transitions. Demo and download available on each tutorial. Dividers can be used directly without any changes and could be small changes based on your needs.

Article will be helpful for designers and non-coders.

Comment your favorite flip card(s) or comment the card(s) which you admired from external resource.

1) Simple Gradient Divider

Demo Image: Simple Gradient Divider

Simple Gradient Divider

Author:
Simeon Vincent
Created:
MAY 12, 2014
Made with:
HTML, CSS

2) Vertical divider – coloured and animated

Demo Image: Vertical divider – coloured and animated

Vertical divider – coloured and animated

Author:
joehanna
Created:
MARCH 10, 2018
Made with:
HTML, CSS

3) Cool Horizontal Divider Headings

Demo Image: Cool Horizontal Divider Headings

Demonstrating how to use Flexbox, 0.5px lines, and CSS filters to create cool horizontal rule-style headings.

Author:
Benjamin Knight
Created:
NOVEMBER 22, 2014
Made with:
HTML, CSS

4) Text Divider

Demo Image: Text Divider

A pretty common pattern to have divider text splitting 2 content options. This adapts between 2 breakpoints.

Author:
Lynden Oliver
Created:
MARCH 30, 2017
Made with:
HTML, CSS

5) Simple stylish divider with a little help of span

Demo Image: Simple stylish divider with a little help of span.

Use a span element to style the divider a little bit. Play with the width of the span element to make the stroke longer or shorter.

Author:
HummixX
Created:
JULY 24, 2015
Made with:
HTML, CSS

6) Diagonal Divider

Demo Image: Diagonal Divider

Uses a css triangle to create a slant effect between elements.

Author:
JD Tinney
Created:
AUGUST 15, 2014
Made with:
HTML, CSS

7) Pure CSS Horizontal Divider With Star Icon

Demo Image: Pure CSS Horizontal Divider With Star Icon

This is a vanilla CSS horizontal page divider line with a star icon.

Author:
Isabel C
Created:
MAY 08, 2017
Made with:
HTML, CSS

8) Crooked section dividers

Demo Image: crooked section dividers

Dynamically crooked lines, headings, and backgrounds.

Author:
Brandon Kennedy
Created:
APRIL 07, 2015
Made with:
HTML, CSS

9) Pixel Dividers

Demo Image: Pixel Dividers

Pixel Dividers

Author:
C4rin3
Created:
JULY 27, 2014
Made with:
HTML, CSS

10) Easy divider

Demo Image: Easy divider

Versatile HTML/CSS divider needed specifically for something – needs a little work on some browsers but it’s a decent start on Chrome.

Author:
St.G
Created:
NOVEMBER 18, 2014
Made with:
HTML, CSS

11) Different CSS Divider

Demo Image: Different CSS Divider

Different CSS Divider

Author:
Milan
Created:
JANUARY 27, 2017
Made with:
HTML, CSS

12) Rainbowy Dashed Divider

Demo Image: Rainbowy Dashed Divider

Rainbowy Dashed Divider

Author:
Simon Goellner
Created:
JULY 26, 2015
Made with:
HTML, CSS

13) Responsive SVG Arrow as Section divider

Demo Image: Responsive SVG Arrow as Section divider

Responsive SVG Arrow as Section divider

Author:
Domonkos Horvath
Created:
SEPTEMBER 14, 2015
Made with:
HTML, CSS

14) Jagged Divider

Demo Image: Jagged Divider

Jagged Divider

Author:
Timothy M. LeBlanc
Created:
JANUARY 20, 2014
Made with:
HTML, CSS

About CV

I'm frontend developer