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.

Simple Gradient Divider

Vertical divider - coloured and animated

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

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

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.

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

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

Dynamically crooked lines, headings, and backgrounds.

Pixel Dividers

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

Different CSS Divider

Rainbowy Dashed Divider

Responsive SVG Arrow as Section divider

Jagged Divider