HTML

1
2
<div class="divider">
    <h3>Animated Divider with Gradient color</h3>
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS

1
2
body {
    background: #10111F;
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

body {
	background: #10111F;
	text-align: center;
}

h3 {
	width: 100%;
	padding: 0;
	color: #fff;
}

.divider {
	width: 90%;
	margin: 0 auto;
}

.animated-gradient-divider-hr {
	width: 100%;
	height: 1px;
	display: block;
	position: relative;
	margin-bottom: 0em;
	padding: 2em 0;
}

.animated-gradient-divider-hr:after,
.animated-gradient-divider-hr:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: 50%;
	left: 0;
}

.animated-gradient-divider-hr:before {
	background: linear-gradient(90deg, #10111F 0%, #10111F 50%, transparent 50%, transparent 100%);
	background-size: 15px;
	background-position: center;
	z-index: 1;
}

.animated-gradient-divider-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: speed 5s linear infinite;
	animation: speed 5s linear infinite;
}

@-webkit-keyframes speed {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 200%;
  }
}
@keyframes speed {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 200%;
  }
}

.animated-gradient-divider-hr: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: speed 120s linear infinite;
          animation: speed 120s linear infinite;
}

.animated-gradient-divider-hr:hover:before {
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
}

.animated-gradient-divider-hr:hover:after {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

Animated Gradient Divider

Yet another gradient divider, but this one has two animations. By default, you will see the gradient divider moving across the screen. If you hover over it, it will increase the animation speed.

You can change the animation speed by changing CSS lines 81 and 82.