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.

Demo Image: Simple Gradient Divider

Simple Gradient Divider

Simple Gradient Divider

Author:
Simeon Vincent
Created:
MAY 12, 2014
Made with:
HTML, CSS
Demo Image: Vertical divider - coloured and animated

Vertical divider - coloured and animated

Vertical divider - coloured and animated

Author:
joehanna
Created:
MARCH 10, 2018
Made with:
HTML, CSS
Demo Image: Cool Horizontal Divider Headings

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
Demo Image: Text Divider

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
Demo Image: Simple stylish divider with a little help of span.

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
Demo Image: Diagonal Divider

Diagonal Divider

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

Author:
JD Tinney
Created:
AUGUST 15, 2014
Made with:
HTML, CSS
Demo Image: Pure CSS Horizontal Divider With Star Icon

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
Demo Image: crooked section dividers

Crooked section dividers

Dynamically crooked lines, headings, and backgrounds.

Author:
Brandon Kennedy
Created:
APRIL 07, 2015
Made with:
HTML, CSS
Demo Image: Pixel Dividers

Pixel Dividers

Pixel Dividers

Author:
C4rin3
Created:
JULY 27, 2014
Made with:
HTML, CSS
Demo Image: Easy divider

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
Demo Image: Different CSS Divider

Different CSS Divider

Different CSS Divider

Author:
Milan
Created:
JANUARY 27, 2017
Made with:
HTML, CSS
Demo Image: Rainbowy Dashed Divider

Rainbowy Dashed Divider

Rainbowy Dashed Divider

Author:
Simon Goellner
Created:
JULY 26, 2015
Made with:
HTML, CSS
Demo Image: Responsive SVG Arrow as Section divider

Responsive SVG Arrow as Section divider

Responsive SVG Arrow as Section divider

Author:
Domonkos Horvath
Created:
SEPTEMBER 14, 2015
Made with:
HTML, CSS
Demo Image: Jagged Divider

Jagged Divider

Jagged Divider

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

Advertisement