w3 tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders
w3 tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders
w3 tweaks
No Result
View All Result

14 CSS Divider Collections

by CV
September 25, 2019
in Essentials

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.

RelatedPosts

Custom radio button using CSS only

T-shirt cannon playful animated button concept

Chat bubble smoothly morphs into a “close” X

Clipped Overlapping Grid Items

Exciting Multi-line Highlights

Stacked Rainbow Cards

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

Simple Gradient Divider
Demo Image: Simple Gradient Divider

Simple Gradient Divider

Tutorial/codes – Demo

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

2) Vertical divider – coloured and animated

Vertical divider - coloured and animated
Demo Image: Vertical divider – coloured and animated

Vertical divider – coloured and animated

Tutorial/codes – Demo

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

3) Cool Horizontal Divider Headings

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.

Tutorial/codes – Demo

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

4) Text Divider

Text Divider
Demo Image: Text Divider

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

Tutorial/codes – Demo

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

5) Simple stylish divider with a little help of span

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.

Tutorial/codes – Demo

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

6) Diagonal Divider

Diagonal Divider
Demo Image: Diagonal Divider

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

Tutorial/codes – Demo

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

7) Pure CSS Horizontal Divider With Star Icon

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.

Tutorial/codes – Demo

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

8) Crooked section dividers

crooked section dividers
Demo Image: crooked section dividers

Dynamically crooked lines, headings, and backgrounds.

Tutorial/codes – Demo

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

9) Pixel Dividers

Pixel Dividers
Demo Image: Pixel Dividers

Pixel Dividers

Tutorial/codes – Demo

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

10) Easy divider

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.

Tutorial/codes – Demo

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

11) Different CSS Divider

Different CSS Divider
Demo Image: Different CSS Divider

Different CSS Divider

Tutorial/codes – Demo

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

12) Rainbowy Dashed Divider

Rainbowy Dashed Divider
Demo Image: Rainbowy Dashed Divider

Rainbowy Dashed Divider

Tutorial/codes – Demo

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

13) Responsive SVG Arrow as Section divider

Responsive SVG Arrow as Section divider
Demo Image: Responsive SVG Arrow as Section divider

Responsive SVG Arrow as Section divider

Tutorial/codes – Demo

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

14) Jagged Divider

Jagged Divider
Demo Image: Jagged Divider

Jagged Divider

Tutorial/codes – Demo

Author:
Timothy M. LeBlanc
Created:
JANUARY 20, 2014
Made with:
HTML, CSS
Tags: animationCollectionCSScss Dividersdividers
Previous Post

99 Hand-picked CSS Card Collections

Next Post

18 Hand Picked CSS Range Sliders

Related Posts

Pill Styled Radio ButtonsPill Styled Radio Buttons
Essentials

Custom radio button using CSS only

December 10, 2020
t-shirt cannon playful animated button concept
Essentials

T-shirt cannon playful animated button concept

October 13, 2020
chat bubble smoothly morphs into a "close" X
Essentials

Chat bubble smoothly morphs into a “close” X

October 13, 2020
Clipped Overlapping Grid Items
Essentials

Clipped Overlapping Grid Items

September 30, 2020
Exciting Multi-line Highlights
Essentials

Exciting Multi-line Highlights

September 21, 2020
Stacked rainbow cards
Essentials

Stacked Rainbow Cards

July 9, 2020
Next Post
18 Hand Picked CSS Range Sliders 1

18 Hand Picked CSS Range Sliders

Discussion about this post

Popular Posts

41 Multi step HTML forms

92 CSS Text styling and Effects

99 Hand-picked CSS Card Collections

20 HTML & CSS pricing tables

11 CSS Shopping Cart UI/UX

76 Hand Picked CSS Music Players

14 CSS Divider Collections

Simple php login and logout script using php session and database using MySQL

Tags

Angularjs (20) AngularJS Tutorials (16) animation (70) animation examples (14) beautiful (12) Button (24) button hover effect (15) Buttons (24) Calendar (38) calendars (38) cards (24) click animation (12) click buttons (19) CSS (128) css3 (20) css buttons (54) css calendar (36) css calendars (37) css effects (22) css hover effects (31) demo (18) effect (33) effects (41) essentials (48) Free Tool (13) hover (23) hover animation (31) Hover effects (40) html (86) inputs (14) Javascript (68) jquery (26) js (18) loaders (14) menu (13) mouse hover effects (36) navigation (14) pure (13) simple (13) text effects (24) Toggle Switches (13) tool (12) tutorial (32) tutorials (14) YouTube (13)
No Result
View All Result
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders

© 2020 w3tweaks

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist