A gradient divider with CSS

Below is a divider I use on some of my blogs, implemented using CSS and <div> tags.

If you want to use it in your blog posts, you will need to edit the HTML code of the blog post and add the following code:

<style>
#divider {
  margin: 20px auto;
  text-align: center;
  height: 2px;
  width: 80%;
  background: linear-gradient(90deg, hsl(196, 100%, 55%), hsl(196, 100%, 32%), hsl(196, 100%, 55%));
}
</style>

Then, edit the HTML code of the page and, in the place where you want the divider to appear enter the following code:

<div id="divider">&nbsp;</div>

Variations

If you use this divider on multiple pages, it is better to copy the styling into the theme’s custom CSS:

#divider {
  margin: 20px auto;
  text-align: center;
  height: 2px;
  width: 80%;
  /* hsl(hue saturation lightness / alpha) */
  /* https://www.w3schools.com/colors/colors_picker.asp */
  background: linear-gradient(90deg, hsl(196, 100%, 55%), hsl(196, 100%, 32%), hsl(196, 100%, 55%));
}

To change the colors of the divider, you can use https://www.w3schools.com/colors/colors_picker.asp to pick up the desired colors.

 

In the example above I chose the main theme color for the central area of the gradient. Then I used the site mentioned above to choose a slightly lighter shade for the left and right edges of the gradient.

If you need a colorful divider you can change the CSS code to:

<style>
#divider1 {
  margin: 20px auto;
  text-align: center;
  height: 2px;
  width: 80%;
  /* hsl(hue saturation lightness / alpha) */
  background: linear-gradient(90deg, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(216, 100%, 50%));
}
</style>

and in HTML you can use

<div id="divider1">&nbsp;</div>

Cover photo by Katie Moum on Unsplash