8+ CSS Divider Examples

This post contains a total of 8+ CSS Divider Examples with Source Code. All these Dividers are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Divider Examples

1. By Isabel C

Made by Isabel C. Pure CSS Horizontal Divider With Star Icon. Source

CSS Divider by Isabel C
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.astrodivider {
  margin:64px auto;
  width:400px; 
  max-width: 100%;
  position:relative;
}

.astrodividermask { 
    overflow:hidden; height:20px; 
}

.astrodividermask:after { 
      content:''; 
      display:block; margin:-25px auto 0;
      width:100%; height:25px;  
        border-radius:125px / 12px;
       box-shadow:0 0 8px #049372;
}
.astrodivider span {
    width:50px; height:50px; 
    position:absolute; 
    bottom:100%; margin-bottom:-25px;
    left:50%; margin-left:-25px;
    border-radius:100%;
   box-shadow:0 2px 4px #4fb39c;
    background:#fff;
}
.astrodivider i {
    position:absolute;
    top:4px; bottom:4px;
    left:4px; right:4px;
    border-radius:100%;
    border:1px dashed #68beaa;
    text-align:center;
    line-height:40px;
    font-style:normal;
     color:#049372;
}
</style>
</head>
<body>
  <div class="astrodivider"><div class="astrodividermask"></div><span><i>&#10038;</i></span></div>
</body>
</html>

2. By Parveen Kaushik

Made by Parveen Kaushik. Line Break Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Titillium+Web:400,200'> 
<style>
html, body {
	background:#262626;
	margin:0;
	padding:0;
	font-family: 'Titillium Web', sans-serif;
	font-size: 23px;
	line-height: 42px;
	font-weight: 100;
	color:#fff;
}
.container {
	max-width:1000px;
  width:90%;
	margin:5% auto 0;
}
.divider {
	display:flex;
	overflow:hidden;
}
.divider span {
	height:10px; 
	width:100%; 
	transition: transform 2s ease;
}
.divider span:nth-child(1) {
	background:#FFA000;
}
.divider span:nth-child(2) {
	background:#ff4081;
}
.divider span:nth-child(3) {
	background:#FFFF8D;
}
.divider span:nth-child(4) {
	background:#00C853;
}
.divider span:nth-child(5) {
	background:#AFB42B;
}
.divider span:hover{
	transform: scale(15);
}
</style>
</head>
<body>
  <div class="container">
	<h1>HOVER OVER LINE BREAK</h1>
    <div class="divider">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
</body>
</html>

3. By Simon Goellner

Made by Simon Goellner. Rainbowy Dashed Divider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:100);
.hr {
  width: 100%;
  height: 1px;
  display: block;
  position: relative;
  margin-bottom: 0em;
  padding: 2em 0;
}
.hr:after, .hr:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 50%;
  left: 0;
}
.hr:before {
  background: linear-gradient(90deg, #10111F 0%, #10111F 50%, transparent 50%, transparent 100%);
  background-size: 15px;
  background-position: center;
  z-index: 1;
}
.hr:after {
  transition: opacity 0.3s ease, -webkit-animation 0.3s ease;
  transition: opacity 0.3s ease, animation 0.3s ease;
  transition: opacity 0.3s ease, animation 0.3s ease, -webkit-animation 0.3s ease;
  background: linear-gradient(to right, #62efab 5%, #F2EA7D 15%, #F2EA7D 25%, #FF8797 35%, #FF8797 45%, #e1a4f4 55%, #e1a4f4 65%, #82fff4 75%, #82fff4 85%, #62efab 95%);
  background-size: 200%;
  background-position: 0%;
  -webkit-animation: bar 15s linear infinite;
          animation: bar 15s linear infinite;
}
@-webkit-keyframes bar {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 200%;
  }
}
@keyframes bar {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 200%;
  }
}

.hr.anim:before {
  background: linear-gradient(90deg, #10111F 0%, #10111F 5%, transparent 5%, transparent 10%, #10111F 10%, #10111F 15%, transparent 15%, transparent 20%, #10111F 20%, #10111F 25%, transparent 25%, transparent 30%, #10111F 30%, #10111F 35%, transparent 35%, transparent 40%, #10111F 40%, #10111F 45%, transparent 45%, transparent 50%, #10111F 50%, #10111F 55%, transparent 55%, transparent 60%, #10111F 60%, #10111F 65%, transparent 65%, transparent 70%, #10111F 70%, #10111F 75%, transparent 75%, transparent 80%, #10111F 80%, #10111F 85%, transparent 85%, transparent 90%, #10111F 90%, #10111F 95%, transparent 95%, transparent 100%);
  background-size: 150px;
  background-position: center;
  z-index: 1;
  -webkit-animation: bar 120s linear infinite;
          animation: bar 120s linear infinite;
}
.hr.anim:hover:before {
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
}
.hr.anim:hover:after {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

body {
  background: #10111F;
  padding: 4em;
  font-family: Lato;
  font-weight: 100;
  color: #696B89;
  text-indent: 1em;
  line-height: 1;
}

h1, h2 {
  line-height: 1;
  margin-bottom: -0.5em;
}

h2 {
  margin-top: 5em;
}
</style>
</head>
<body>
  <h1>much split, &nbsp;&nbsp; very rainbow, &nbsp;&nbsp; so &lt;hr&gt;, &nbsp;&nbsp; wow!</h1>   
<b class="hr"></b>  
<br><br>
<h2>such animate, &nbsp;&nbsp; many secret, &nbsp;&nbsp; do hover.</h2>
<b class="hr anim"></b>
</body>
</html>

4. By Simeon Vincent

Made by Simeon Vincent. Simple Gradient Divider. Source

CSS Divider by Simeon Vincent
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  padding: 20px;
  font-family: arial;
}
p {
  text-align: center;
  padding: 20px;
}
.gradient {
  height: 20px;
  position: relative;
  width: 100%;
  background: radial-gradient(ellipse farthest-side at top center, rgba(0,0,0,0.08), transparent);
}
.gradient:before {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(left, transparent, rgba(0,0,0,0.02), rgba(0,0,0,0.02), transparent);
}
</style>
</head>
<body>
  <p>simple gradient divider</p>
<div class="gradient"></div>
</body>
</html>

5. By Airen

Made by Airen. Simple CSS Divider. Source

CSS Divider by Airen
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import 'https://fonts.googleapis.com/css?family=Share+Tech+Mono';
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/jess-harding-lqT6NAmTaiY-unsplash.jpg"), radial-gradient(#28a3dd, #0d7751);
  background-size: cover;
  background-position: center;
  font-family: "Share Tech Mono", monospace;
  font-size: 2rem;
  background-blend-mode: multiply, screen, overlay;
}

div {
  font-family: "Share Tech Mono", monospace;
  color: #fff;
  font-size: 6vh;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
}
div::before, div::after {
  content: "";
  display: block;
  height: 0.09em;
  min-width: 30vw;
}
div::before {
  background: linear-gradient(to right, rgba(240, 240, 240, 0), #fff);
  margin-right: 4vh;
}
div::after {
  background: linear-gradient(to left, rgba(240, 240, 240, 0), #fff);
  margin-left: 4vh;
}
</style>
</head>
<body>
  <div>Text</div>
</body>
</html>

6. By chilli con code

Made by chilli con code. Responsive Skewed Page Dividers using CSS gradients. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  margin:0px;
}
.colour-block {
  background:#823A9C;
  width:60%;
  padding:7% 20% 10% 20%;
  color:#fff;
}
.white-block {
  background:#fff;
  width:60%;
  padding:7% 20% 10% 20%;
  color:#823A9C;
}
h1 {
  text-align:center;
  font-size:80px;
  font-family:'wire one', serif;
  font-weight:normal;
}
p {
  font-size:20px;
  font-family:'Raleway', serif;
}


/*------------------*/
/*  SKEW CLOCKWISE  */
/*------------------*/
.skew-cc{
  width:100%;
  height:100px;
  position:absolute;
  left:0px;
  background: linear-gradient(to right bottom, #823A9C 49%, #fff 50%),    linear-gradient(-50deg, #ffffff 16px, #000 0);
}


/*-------------------------*/
/* SKEW COUNTER CLOCKWISE  */
/*-------------------------*/
.skew-c{
  width:100%;
  height:100px;
  position:absolute;
  left:0px;
  background: linear-gradient(to left bottom, #fff 49%, #823A9C 50%);
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Wire+One|Raleway:300' rel='stylesheet' type='text/css'>

<div class="skew-c"></div>
<div class="colour-block">
  <h1>Responsive Skewed Page Dividers.</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="skew-cc"></div>
<div class="white-block">
  <h1>Skewed Counter-Clockwise.</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="skew-c"></div>
<div class="colour-block">
  <h1>Skewed Clockwise.</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</body>
</html>

7. By CMDW

Made by CMDW. Waves Content Divider Using CSS. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
body
{
  margin:0;
  padding:0;
  background-color:#03396c;
}

.editorial {
  display: block;
  width: 100%;
  height: 60px;
  max-height: 60px;
  margin: 0;
  z-index:5;
  bottom:0;
  position:absolute;
  left:0px;
  float:left;
}

.parallax1 > use {
  animation: move-forever1 10s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.parallax2 > use {
  animation: move-forever2 8s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.parallax3 > use {
  animation: move-forever3 6s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.parallax4 > use {
  animation: move-forever4 4s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}
@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
@keyframes move-forever3 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}
@keyframes move-forever4 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
</style>
</head>
<body>
  <svg class="editorial"
  xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28 "
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax1">
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#f461c1"/>
  </g>
    <g class="parallax2">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
    </g>
      <g class="parallax3">
   <use xlink:href="#gentle-wave" x="50" y="9" fill="#3461c1"/>
   </g>
    <g class="parallax4">
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#fff"/>  
  </g>
</svg>
</body>
</html>

8. By Anthony Law Liddle

Made by Anthony Law Liddle. Fancy divider. Source

CSS Divider by Anthony Law Liddle
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  max-width: 700px;
  margin: auto;
  padding: 20px 40px;
  font-size: 23px;
  line-height: 160%;
}

hr {
  margin: 1.5em auto;
  position: relative;
  height: 9px;
  width: 9px;
  border: transparent;
  overflow: visible;
  background-image: url('data:image/svg+xml;utf8,<svg width="9" height="9" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><rect x="0.75" y="0.5" width="8" height="8" rx="4" fill="%231CB0A8" /></svg>');
}
hr:before {
  position: absolute;
  height: 9px;
  width: 10px;
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="9" viewBox="0 0 10 9" xmlns="http://www.w3.org/2000/svg"><path d="M3.91043 1.29752C4.30449 0.688518 5.19551 0.688519 5.58957 1.29752L9.25143 6.95675C9.68196 7.62211 9.20436 8.5 8.41186 8.5H1.08814C0.29564 8.5 -0.181954 7.62211 0.248574 6.95675L3.91043 1.29752Z" fill="%23FCB643" /></svg>');
  left: -18px;
}
hr:after {
  position: absolute;
  height: 9px;
  width: 9px;
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg width="9" height="9" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><rect x="0.75" y="0.5" width="8" height="8" rx="1" fill="%23EF4056" /></svg>');
  right: -18px;
}
</style>
</head>
<body>
  <p>Text</p>
<hr />
<p>Text</p>

</body>
</html>

9. By Tim Holt

Made by Tim Holt. HR divider with shadow. Source

CSS Divider by Tim Holt
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
hr {
  border:none;
  height: 20px;
 	width: 90%;
	height: 50px;
	margin-top: 0;
	border-bottom: 1px solid #1f1209;
	box-shadow: 0 20px 20px -20px #333;
  margin: -50px auto 10px; 
}
</style>
</head>
<body>
  <br><br>
<hr>
</body>
</html>